错误类型错误：_co.onCLk 不是函数答案

【问题标题】：ERROR TypeError: _co.onCLk is not a function错误类型错误：_co.onCLk 不是函数
【发布时间】：2018-04-28 03:37:00
【问题描述】：

在 Angular 2 中尝试一个代码，它的 HTML 正在运行，但 Angular 代码没有执行它说我从 html 传递的值不是一个函数。请帮忙！

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：我在这里定义变量并添加点击事件以显示我从 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: 'Jack',
      Empname: 'Bcd' 
    },{
      name: 'John',
      Empname: 'Cde' 
    }
  ]
  }

}

运行代码时在控制台上显示错误消息：我在这里遇到的类型错误是 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)

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

您在模板中将函数命名错误，请将 "L" 更改为 "l"

来自

 (click)="onCLk($event)"

收件人

 (click)="onClk($event)"

【讨论】：

对于任何来到这里并盯着它看但没有看到它的人，L 大小写在不同情况下是不同的。
@Captain Prinny 哈哈哈！我花了将近 5 分钟试图了解它们之间的区别，直到我决定查看评论。谢谢

【解决方案2】：

下面的代码就可以了。

onClk = function(event){
    this.name = event.target.innerHTML;
}

【讨论】：

将组件中的方法更改为 methodName = function (){//some code here } from methodName(){//some code here} 对我有用！

【解决方案3】：

当您在 html 中写入 (event)="myFunc()" 而未在 ts 文件中调用时，有时会发生此错误。

【讨论】：

【解决方案4】：

致任何到达这里但没有其他选择可以帮助他的人：就我而言，我有这些按钮：

<button (click)="logout();" class="btn btn-primary my-1" >Logout</button> <button (click)="login();" class="btn btn-primary my-1" >Login</button>

登录成功，但注销失败。我的 .ts 文件中有这两个功能。我刚刚删除了注销按钮并复制了登录按钮，（我也可以重写它）然后将 .ts 文件中的函数名称复制到 click 事件。这为我解决了这个问题。

【讨论】：