جاوااسکریپت - خطا TypeError: _co.onCLk یک تابع نیست

تلاش برای اجرای یک کد در Angular 2، HTML آن اجرا میشود اما کد انگولار اجرا نمیشود. میگوید مقداری که از HTML میفرستم، یک تابع نیست. لطفاً کمک کنید!

HTML: app.html - من سعی دارم جزئیات دانشآموز را نمایش دهم. من یک لیست از آیتمها در فایل angular app.component.ts دارم که آن را در صفحه HTML فراخوانی میکنم و به خوبی کار میکند. اما وقتی مقداری را در یک رویداد کلیک به app.component.ts میفرستم، خطا میدهد و در کنسول نشان میدهد که this یک تابع نیست.

<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.app.ts: در اینجا من متغیرها را تعریف میکنم و رویداد کلیک را اضافه میکنم تا نامی که از HTML کلیک میکنم را در رابط کاربری نمایش دهم. در عین حال من این امکان را دادهام که نامهای بیشتری به فهرست قبلاً اضافه شده در رابط کاربری اضافه شوند.

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)

پاسخ شماره ۱

شما نام تابع را در قالب خود اشتباه قرار دادهاید، "L" را به "l" تغییر دهید

از

 (click)="onCLk($event)"

به

 (click)="onClk($event)"

پاسخ شماره ۲

کد زیر کار خواهد کرد.

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