为 *ngFor angular2 的每一行调用函数

Question

我必须显示一个 table 并为 table 的每一行调用一个函数，并且该函数为一行调用一次。

<tr *ngFor="let item of mf.data"  >
          <td >
            <button (click)="remove(item)" class="btn btn-danger">x</button>
          </td>
          <td>{{item.name}}</td>
          <td>{{item.email}}</td>
          <td class="text-right">{{item.age}}</td>
          <td>{{item.city | uppercase}}</td>
        </tr>

请建议我如何实现此功能？

Answer 1

您可以添加指令

@Directive({ selector: '[invoke]'})
class InvokeDirective {
  @Output() invoke:EventEmitter = new EventEmitter();
  ngAfterContentInit() {
    this.invoke.emit(null);
  }
}

并且喜欢使用它

<tr *ngFor="let item of mf.data" (invoke)="myFunction(item)" >

为 *ngFor angular2 的每一行调用函数

call function for every row of *ngFor angular2

typescript

ngfor

angular