web-dev-qa-db-fra.com

ERREUR TypeError: _co.onCLk n'est pas une fonction

Essayer un code dans Angular 2 son code HTML est en cours d’exécution, mais angular n’est pas en cours d’exécution, il indique que la valeur que je suis en train de passer du code HTML n’est pas une fonction. Veuillez Aidez-moi!

HTML: app.html - J'essaie de montrer les détails de l'étudiant. J'ai une liste d'éléments dans le fichier angular app.component.ts que j'appelle sur une page HTML qui fonctionne correctement. Mais lorsque je passe une valeur sur un événement click à app.component .ts amende son erreur donnant et montrant sur console que ce n’est pas une fonction.

<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: Ici, je définis des variables et j'ajoute un événement click pour montrer le nom, je clique sur html pour l'afficher sur l'interface utilisateur. En même temps, j'ai donné la possibilité d'ajouter plus de noms à la liste déjà ajoutée sur l'interface utilisateur.

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' 
    }
  ]
  }

}

Obtenir un message d'erreur sur la console lorsque j'exécute le code: Tapez l'erreur que j'obtiens ici. OnCLK n'est pas une fonction. C'est une fonction qui renvoie la valeur HTML dans le fichier app.component.ts et à partir de là, nous obtenons la valeur sur laquelle nous avons cliqué. De plus, de nombreuses autres erreurs ne sont pas certaines de ce que cela signifie.

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

Vous avez mal nommé la fonction dans votre modèle, Changer

à partir de

 (click)="onCLk($event)"

To

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

le code ci-dessous fera l'affaire.

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