Question

我正在尝试将按钮附加到角度表。

它显示按钮，但点击它时，它不会触发事件。

这是我的表：

<table mat-table [dataSource]="GetGridData()">
  <!-- Rest removed for brevity.. -->

  <ng-container matColumnDef="Products">
    <th mat-header-cell *matHeaderCellDef> Products </th>
    <td mat-cell *matCellDef="let element">
      <button mat-raised-button (click)="OnGetAllProducts(element.CategoryId)">See all products</button>
    </td>
  </ng-container>

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

这就是我对我的看法：

export class DashboardComponent {
    // Rest of code removed for brevity.         

    // Row's events.
    //--------------
    OnGetAllProducts(categoryId: number) {
        alert("Listed");
    }
}

这是我的模特：

export class Category {
    public CategoryId: number;
    public CategoryName: string;
}

Answer 1

TLDR； 验证样式的正确性

由于许多人会遇到类似的问题并像我一样落在这里，所以我希望当我发布对我有用的解决方案来帮助下一代时，这不会是一个大冒犯。

@BasavarajBhusani和其他人提出了一个很好的问题，如果button is really visible from UI。

事实是，尽管我的按钮在物理上是可见的，但它还是滑出了父元素的边框。通过使父元素动态调整其大小来修复样式后，它开始工作良好。

这很奇怪，但是相同的布局在AngularJS（1.X）中效果很好，但是在移植到Angular 6之后就停止了。

Angular 6 - Click事件未触发

1 个答案: