html - 单击功能上的表格行在 Angular7 中不起作用

Question

每当我单击 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