错误TypeError:_co.onCLk不是函数

Question

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

HTML:app.html - 我正在尝试显示学生的详细信息.我在角度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:在这里我定义变量并添加click事件以显示名称我从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)

Answer 1

您已在模板中将该功能命名为错误,更改

从

 (click)="onCLk($event)"

至

 (click)="onClk($event)"