Angular 11 在 ngFor 中嵌入动态变量

Question

我在编写这段代码时遇到语法错误...

<tbody>
   <tr *ngFor="let incident of incidents | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
    <td>{{ incident.name }}</td>
    <td>{{ incident.type }}</td>
    <td>{{ incident.str }}</td>
    <td>{{ incident.mtdna }}</td>
    <td>{{ incident.ystr }}</td>
    <td>{{ incident.xstr }}</td>
    <td>{{ incident.snps }}</td>
    <td>
      <button type="submit" (click)="editRecord({{incident.id}})" class="btn btn-primary float-start">
      Edit {{ incident.id }}
      </button>
    </td>
   </tr>
</tbody>

问题出在这段代码的 (click)="editRecord({{incident.id}})" 部分。

Angular 11 不允许我将 id 嵌入到 editRecord() 方法调用中。

如果我写 (click)="editRecord(1)，那么错误就会消失。

我的问题是，如何将 id 嵌入到 editRecord 方法调用中？

Answer 1

不需要 {{ }}，你可以避免它，因为 (click)="expects variable or method calls or executable code"

<button type="submit" (click)="editRecord(incident.id)" class="btn btn-primary float-start">
      Edit {{ incident.id }}
      </button>

Angular 11 在 ngFor 中嵌入动态变量

Embedding dynamic variable in ngFor in Angular 11

javascript

variables

formatting

ngfor

angular