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中，您可以使用In [31]: 'Stark' and None In [32]: 'Tony' and None In [33]: None and 'Tony' In [34]: None and 'Stark'，它与Angular JS的(click)类似。

尝试：

ng-click

StackBlitz Demo

Answer 2

ng-click实际上是用于AngularJS（1.x）

您要使用用于Angular的(click)。

文档：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>

单击功能中的表行在Angular7中不起作用

3 个答案: