Angular Material Table 内的按钮不起作用

Question

我有以下 Angular Material Table 设置：

    <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

在 mat-table 中，你可以像这样使用按钮

                    <button
                        mat-icon-button
                        color="accent"
                        (click)="delete(row.id)"
                      >
                        <mat-icon aria-label="delete" class="md-20"
                            >delete</mat-icon
                        >
                    </button>

Answer 2

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

Answer 3

我以前也遇到过类似的问题。 *ngFor 中的按钮不像您的示例那样对我有用。

无效示例，其中按钮的行为与您的类似：

https://stackblitz.com/edit/angular-form-array-example-hq5tud

这是解决的时候：

https://stackblitz.com/edit/angular-form-array-example-test123-2jzdij

也许这会有所帮助：

Angular Material Table 内的按钮不起作用

Button within Angular Material Table not working

angular

angular-material

angular-material-table