web-dev-qa-db-ja.com

Angular 6-クリックイベントが発生していません

angularテーブルにボタンを追加しようとしています。

ボタンは表示されますが、クリックしてもイベントは発生しません。

これは私のテーブルです：

<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;
}
angularangular6
3
RottenCheese

dataSourceです。 GetGridData（）関数はテンプレートに配置したため、常に実行されています。テンプレートはテーブルを際限なく再レンダリングしているため、これは悪い習慣です。代わりに、結果を変数に保存し、それをdataSourceとして渡す必要があります。

1
Christian

TLDR;スタイルの正確性を検証する

多くの人々が同様の問題に遭遇し、ここに着地する可能性があるので（自分のように）次世代を支援するために私のために働いた解決策を投稿するとき、それは大きな犯罪ではないことを願っています。

@BasavarajBhusaniと他の人は、button is really visible from UI。

真実は、物理的に見えるにもかかわらず、私のボタンが親要素の境界から外れたです。親要素を作成してサイズを動的に調整することでスタイルを修正した後、うまく機能し始めました。

奇妙ですが、同じレイアウトがAngularJS（1.X）でうまく機能しましたが、Angular 6。

0
mpasko256