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