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”指令，则该按钮会突然起作用。

我在表单上还有其他材料设计按钮，所以这不是模块导入问题。

这是怎么回事？

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

Answer 2

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

我过去也有类似的问题。 *ngFor中的按钮不适用于您的示例。

不起作用的示例，其中按钮的行为与您的相似：

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

这是解决的时候：

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

也许这会有所帮助：

角材料表中的按钮不起作用

3 个答案: