Comment rendre la table sans carte d'identité en utilisant un matériau angulaire

Question

J'utilise matériel dans le projet angulaire de cet exemple: https://material.angular.io/components/table/examples

Je table avec jeu de données: displayedColumns = ['userId', 'userName', 'progress', 'color']; Pour rends J'utilise le code:

<div class="example-container mat-elevation-z8"> 
    <div class="example-header"> 
    <mat-form-field floatPlaceholder="never"> 
     <input matInput #filter placeholder="Filter users"> 
    </mat-form-field> 
    </div> 

    <mat-table #table [dataSource]="dataSource"> 

    <!--- Note that these columns can be defined in any order. 
      The actual rendered columns are set as a property on the row definition" --> 

    <!-- ID Column --> 
    <ng-container matColumnDef="userId"> 
     <mat-header-cell *matHeaderCellDef> ID </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell> 
    </ng-container> 

    <!-- Progress Column --> 
    <ng-container matColumnDef="progress"> 
     <mat-header-cell *matHeaderCellDef> Progress </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.progress}}% </mat-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container matColumnDef="userName"> 
     <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell> 
    </ng-container> 

    <!-- Color Column --> 
    <ng-container matColumnDef="color"> 
     <mat-header-cell *matHeaderCellDef> Color </mat-header-cell> 
     <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 
    </mat-table> 
</div> 

Je ne veux pas rendre ID Colonne, mais Je veux id variable dans tableau. Comment est-ce que je peux désactiver le rendu de la colonne d'identification? Quand je supprimer le code:

<ng-container matColumnDef="userId"> 
     <mat-header-cell *matHeaderCellDef> ID </mat-header-cell> 
     <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell> 
    </ng-container> 

Je reçois l'erreur:

ERROR Error: cdk-table: Could not find column with id "userId". 

Answer 1

C'est parce que vous ne l'avez pas supprimé le « userId » dans la liste des colonnes affichées, Dans votre modèle

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 

Ici, la valeur affichéeColonnes est en cours d'initialisation dans le composant (le fichier * .ts correspondant). Ce qui pourrait ressembler à

displayedColumns = ['userId', 'userName', 'progress', 'color']; 

Il suffit de retirer le « userId » dans la liste ci-dessus et cela fonctionnera.