Angular 6 - Click事件未触发

时间:2018-05-10 18:19:37

标签: angular angular6

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

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

这是我的表:

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

1 个答案:

答案 0 :(得分:0)

TLDR; 验证样式的正确性

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

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

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

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