3

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

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

这是我的桌子：

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

这就是我在我的 ts 上得到的：

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;
}
4

2 回答 2

4

这是dataSource. 您的 GetGridData() 函数一直在运行，因为您将它放在模板中，这会无休止地重新渲染表格，这就是为什么这是一个不好的做法。相反，将结果存储在一个变量中，这就是您应该作为数据源传递的内容。

于 2018-05-10T22:19:40.857 回答
1

TLDR；验证样式的正确性

由于许多人可能会遇到类似的问题并在这里登陆（比如我自己），我希望当我发布对我有用的解决方案以帮助下一代时，这不会是一个大冒犯。

@BasavarajBhusani 和其他人提出了非常好的问题，如果button is really visible from UI.

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

这很奇怪，但相同的布局在 AngularJS (1.X) 中运行良好，但在移植到 Angular 6 后停止了。

于 2018-09-17T23:20:09.680 回答