Javascript 错误类型错误：_co.onCLk 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47298473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ERROR TypeError: _co.onCLk is not a function
提问by harry
Trying one code in Angular 2 its HTML is running but angular code is not executing it says the value which i am passing from html is not a function. Please help!
在 Angular 2 中尝试一个代码，它的 HTML 正在运行，但 Angular 代码没有执行它说我从 html 传递的值不是一个函数。请帮忙！
HTML: app.html - i am trying to show the student details. I have a list of items in angular app.component.ts file which i am calling on HTML page which is working fine. But when i am passing a value on a click event to app.component.ts fine its giving error and showing on console that this is not a function.
HTML: app.html - 我想显示学生的详细信息。我在 angular app.component.ts 文件中有一个项目列表，我在 HTML 页面上调用它工作正常。但是当我将一个点击事件的值传递给 app.component.ts 时，它会给出错误并在控制台上显示这不是一个函数。
<div class ="card search">
<h1 class = "search-headline"> Student Directory</h1>
<label class = "search-label"> Search
<span *ngIf = "name">for: {{ name }}</span></label>
<input class = "search-input" #newStudent>
<button class ="btn"
(click)="addstudent(newstudent.value)"
>Add</button>
</div>
<ul class="studentlist cf">
<li class="studlist-item cf" *ngFor="let stud of students" (click)="onClk($event)">
<h2 class="student-name">{{ stud.name }}</h2>
<h3 class="student-emp">{{ stud.Empname }}</h3>
</li>
</ul>Angular component.app.ts: Here i am defining variables and add click event to show name i am clicking from the html to show on UI. At the same time i have given a ability to add more names to the already added list on the UI.
Angular component.app.ts：在这里我定义变量并添加单击事件以显示名称我正在从 html 单击以显示在 UI 上。同时，我还提供了向 UI 上已添加列表添加更多名称的功能。
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './partials/app.html'
})
export class AppComponent {
name: string;
students: any;
event: any;
onClk(event){
this.name = event.target.innerHTML;
}
addstudent(value){
if(value!=' '){
this.students.push({
name: value,
Empname: 'xyz'
});
}
}
constructor(){
this.students = [
{
name: 'Robin',
Empname: 'abc'
},{
name: 'Hyman',
Empname: 'Bcd'
},{
name: 'John',
Empname: 'Cde'
}
]
}
}Getting error message on console when i run the code: Type error i am getting here is onCLK is not a function. Its a function which is returning value form HTML to app.component.ts file and from there we are getting the value we clicked. Also getting many other errors not sure what does that mean?
当我运行代码时在控制台上收到错误消息：我在这里得到的类型错误是 onCLK 不是一个函数。它是一个函数，它从 HTML 返回值到 app.component.ts 文件，从那里我们得到我们点击的值。还收到许多其他错误，不确定这是什么意思？
app.html:12 ERROR TypeError: _co.onCLk is not a function
at Object.eval [as handleEvent] (app.html:12)
at handleEvent (view.ts:142)
at callWithDebugContext (services.ts:815)
at Object.debugHandleEvent [as handleEvent] (services.ts:411)
at dispatchEvent (util.ts:185)
at eval (element.ts:238)
at HTMLLIElement.eval (dom_renderer.ts:75)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (ng_zone.ts:288)
at ZoneDelegate.invokeTask (zone.js:424)
回答by Sajeetharan
You have named the function wrong in your template, Change
您在模板中将函数命名为错误，请更改
From
从
(click)="onCLk($event)"
To
到
(click)="onClk($event)"
回答by Niyas Ibrahim
below code will do.
下面的代码会做。
onClk = function(event){
this.name = event.target.innerHTML;
}
