2
votes

Implémentation de la condition if else dans une cellule mat d'un mat-table - Angular 5

J'essaie d'implémenter une condition if else à l'intérieur d'une cellule mat d'un mat-table dans mon application angulaire. Mais j'obtiens une erreur de la console "ERROR Error: StaticInjectorError (AppModule) [NgIf -> TemplateRef]:"

mon code est

<ng-container matColumnDef="role">
    <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>        
    <mat-cell *matCellDef="let user" ngIf="{{user.roles.length == 1}}">
        Admin          
    </mat-cell>
  </ng-container>

Toute aide est très appréciée .

typescript mat-table angularjs angular5

0 commentaires

3 Réponses :

1
votes

vous avez ngIf , mais il doit être précédé d'un astérisque: *ngIf

De plus, avec un attribut de directive lié comme * ngIf code> vous n'avez pas besoin d'utiliser les accolades à l'intérieur de cela. Faire simplement * ngIf = "user.roles.length == 1" devrait suffire.

Cependant, vous ne pouvez généralement pas avoir deux directives sur le même élément avec des astérisques, donc utiliser un autre est probablement le moyen de résoudre ce problème:

<ng-container matColumnDef="role">
  <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
  <ng-container *ngIf="user.roles.length == 1">
    <mat-cell *matCellDef="let user" >
      Admin          
    </mat-cell>
  </ng-container>
</ng-container>

2 commentaires

Merci mais cela ne fonctionnera pas car "user" y est indéfini dans ng-container

ah oui, peut-être simplement changer l'ordre de ces 2 éléments alors. Vous devrez utiliser 2 éléments quoi qu'il arrive puisque vous avez deux directives qui utilisent * , et vous ne pouvez en avoir qu'un par élément.

0
votes

Vous pouvez utiliser une classe pour définir l'affichage comme aucun et faire le tour

.hide {
  display: none;
}

Et dans votre fichier de feuille de style

<ng-container matColumnDef="role">
<mat-header-cell *matHeaderCellDef>Role</mat-header-cell>        
<mat-cell *matCellDef="let user" [ngClass]="'hide':user.roles.length == 1">
    Admin          
</mat-cell>

0 commentaires

1
votes

J'ai été confronté au même type de problème. Et j'ai trouvé les solutions suivantes.

Vous pouvez utiliser [ngClass] comme suit.

  <tr mat-footer-row [hidden]="dataSource.length==0" *matFooterRowDef="displayedColumns1"></tr>

Ou si vous souhaitez masquer certaines cellules, vous pouvez utiliser l'attribut [hidden] . C'est comme la propriété CSS "display: none".

  <tr mat-footer-row [ngClass]="dataSource.length==0 ? 'hide' : ''" *matFooterRowDef="displayedColumns1"></tr>

0 commentaires