angular - Angular Material 表中的按钮不起作用

Question

我有以下 Angular Material 表设置:

    <table mat-table [dataSource]="getItems()">
      <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let tariff">
          <button type="button" mat-button color="primary" (click)="test()">Delete</button>
        </td>
      </ng-container>

      ...

      <tr mat-header-row *matHeaderRowDef="dColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: dColumns"></tr>
    </table>

  test() {
    console.log('test');
  }

如果我单击删除按钮，则不会调用 test() 方法。如果我删除“mat-button”指令，按钮就会突然起作用。

我的表单上还有其他 Material 设计按钮，因此这不是模块导入问题。

这里发生了什么？

StackBlitz 显示问题:https://stackblitz.com/edit/angular-fgkduw?file=src%2Fapp%2Fapp.component.html

Answer 1

将 [dataSource] 更改为数组而不是函数可以解决问题。

https://stackblitz.com/edit/angular-ezanza?embed=1&file=src/app/app.component.html

这可能是由于 mat-table 的使用不当而导致的奇怪行为。

Angular Material Table 期望 [dataSource] 是一个数组，或者对于更复杂的应用程序，是一个 DataSource 实例。

https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data