网站搜索

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


我必须显示一个表格,并为表格的每一行调用一个函数,每行只调用一次该函数。

<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>

请建议我将如何实现此功能?

答案#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)" >