web-dev-qa-db-fra.com

Angular 6 - L'événement de clic ne se déclenche pas

J'essaie d'ajouter un bouton à une table angulaire. 

Il montre le bouton mais quand un clic dessus, l'événement n'est pas déclenché.

Ceci est ma table:

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

Et voici ce que j'ai sur mes ts:

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

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

Et voici mon modèle:

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

C'est la dataSource. Votre fonction GetGridData () s'exécute en permanence parce que vous l'avez placée dans le modèle, ce qui rend à nouveau le rendu de la table, raison pour laquelle il s'agit d'une mauvaise pratique. Au lieu de cela, stockez le résultat dans une variable et c’est ce que vous devriez transmettre en tant que source de données.

1
Christian

TLDR; vérifier l'exactitude des styles

Comme beaucoup de gens peuvent rencontrer le même problème et atterrir ici (comme moi), j'espère que ce ne serait pas grave si je postais une solution qui fonctionnait pour moi afin d'aider les générations futures.

@BasavarajBhusani et d’autres ont posé une très bonne question, si button is really visible from UI.

La vérité est que, bien qu’il soit physiquement visible, mon bouton a glissé hors des bordures de l’élément parent . Après avoir corrigé les styles en faisant en sorte que l’élément parent ajuste sa taille de manière dynamique, il a commencé à bien fonctionner.

C'est étrange, mais la même disposition fonctionnait bien sous AngularJS (1.X) mais s’arrêtait après le transfert dans Angular 6.

0
mpasko256