Строка таблицы при нажатии кнопки не работает в Angular7

Question

Я пытаюсь вызывать функцию всякий раз, когда я щелкаю строку в таблице HTML, но она не работает и не выдает никаких ошибок.

Я пробовал несколько вещей, и онлайн-код показывает, что, как бы я ни пытался, все должно работать.

Мой код выглядит следующим образом:

Html:

<h2>Userstories</h2>

<button (click)="onNewStory()">New Story</button>

<table>
  <tr *ngFor="let story of userstories" ng-click="onUpdate(story)" [class.selected]="story === selectedStory">
      <td>{{story.id}}</td>
      <td>{{story.name}}</td>
      <td><button ng-click="onUpdate(story)">Click me!</button></td>
  </tr>
</table>

<app-userstory-detail [story]="selectedStory"></app-userstory-detail>

А мой .ts выглядит так:

  selectedStory: UserStory;
  onNewStory() {
    var newStory = {id:this.userstories[this.userstories.length-1].id+1, name:"", description:"Deze is nieuw", status:"open", owner:USERS[1]};
    this.userstories.push(newStory);
    this.selectedStory = newStory;
  }

  onUpdate(userstory: UserStory): void {
    this.selectedStory = userstory;
    console.log(this.selectedStory);
  }

В настоящее время моя консоль не печатает журнал, когда я пытаюсь вызвать метод onUpdate. Ожидаемый результат - увидеть некоторые результаты в журналах, но я понятия не имею, почему он не запускает метод onUpdate.

Answer 1

В Angular 7 вы можете использовать (click), что аналогично ng-click Angular JS.

Попробуйте:

<h2>Userstories</h2>

<button (click)="onNewStory()">New Story</button>

<table>
  <tr *ngFor="let story of userstories" (click)="onUpdate(story)" [class.selected]="story === selectedStory">
      <td>{{story.id}}</td>
      <td>{{story.name}}</td>
      <td><button (click)="onUpdate(story)">Click me!</button></td>
  </tr>
</table>

<app-userstory-detail [story]="selectedStory"></app-userstory-detail>

StackBlitz Demo

Answer 2

ng-click фактически для AngularJS (1.x)

Вы хотите использовать (click) для Angular.

ДОКУМЕНТАЦИЯ: https://angular.io/guide/ajs-quick-reference#ng-click

Answer 3

Событие запускается дважды.В <tr> и <button>.Попробуйте это:

<h2>Userstories</h2>

<button (click)="onNewStory()">New Story</button>

<table>
  <tr *ngFor="let story of userstories" [class.selected]="story === selectedStory">
      <td>{{story.id}}</td>
      <td>{{story.name}}</td>
      <td><button (click)="onUpdate(story)">Click me!</button></td>
  </tr>
</table>

<app-userstory-detail [story]="selectedStory"></app-userstory-detail>