web-dev-qa-db-ja.com

エラーTypeError：_co.onCLkは関数ではありません

HTMLが実行されているAngular 2で1つのコードを実行しようとしていますが、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)
javascripthtmlangulartypescript
13
harry

テンプレート内の関数に間違った名前を付けました、変更

From

 (click)="onCLk($event)"

To

 (click)="onClk($event)"
18
Sajeetharan

以下のコードで行います。

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