html - 点击功能上的表格行在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 方法。

标签： htmlangularangular7

Answer 1

在 Angular 7 中，您可以使用(click)类似于ng-clickAngular 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