web-dev-qa-db-fra.com

colonne de masquage de la table de matériaux angular2

J'ai le tableau de matériaux angular2 suivant

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

        <!-- Position Column -->
        <ng-container matColumnDef="selected">
            <mat-header-cell *matHeaderCellDef>
                <mat-checkbox [(ngModel)]="selectAll"></mat-checkbox>
            </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <mat-checkbox [(ngModel)]="element.selected" [checked]="selectAll"></mat-checkbox>
            </mat-cell>
        </ng-container>

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

        <ng-container matColumnDef="requested_status">
            <mat-header-cell *matHeaderCellDef> Status</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.requested_status}}</mat-cell>
        </ng-container>
        ......

Je dois masquer une colonne dans la table en fonction de certaines conditions booléennes Est-il possible sans changer la carte des colonnes dans mon composant? 

displayedColumns = ['selected', 'id', ...];

J'ai essayé d'utiliser *ngIf mais cela ne fonctionne pas. Comment faire ça?

angularangular-material
5
avalon

La manière angulaire de le faire est de mettre à jour les colonnes passées à votre modèle de ligne :

HTML:

<mat-row *matRowDef="let row; columns: getDisplayedColumns();"></mat-row>

TS:

const columnDefinitions = [
  { def: 'col1', showMobile: true },
  { def: 'col2', showMobile: false },
];

getDisplayedColumns(): string[] {
  const isMobile = this.currentDisplay === 'mobile';
  return this.columnDefinitions
    .filter(cd => !isMobile || cd.showMobile)
    .map(cd => cd.def);
}
8
FRECIA

A la colonne que vous voulez masquer, ajoutez ceci:

[style.display]="'none'"

Vous devriez ajouter à la fois les cellules mat-heather et mat-cell.

4
Rod Astrada

Enfin, j’ai trouvé un moyen de masquer une colonne sans changer les colonnes. Map ..__ Nous devons créer une directive attributaire. Cette directive permet de définir la propriété display d’un élément.

ShowColumnDirective:

import {Component, Directive, ElementRef, Input, AfterViewInit} from '@angular/core';
@Directive({ 
     selector: '[showCoulmn]' 
})
export class ShowColumnDirective implements AfterViewInit{
    @Input() showInput: string;
    constructor(private elRef: ElementRef) { 
    }
    ngAfterViewInit(): void {
    this.elRef.nativeElement.style.display = this.showInput;
    }
}

Déclarez cette directive dans AppModule ou tout autre module:

import {TableBasicExample} from './table-basic-example';
import {ShowColumnDirective} from './table-basic-example';
@NgModule({

  imports: [
    ..........
  ],

  declarations: [TableBasicExample, ShowColumnDirective],
  bootstrap: [TableBasicExample],
  providers: []
})
export class AppModule {}

Maintenant, nous pouvons utiliser la directive à l'intérieur du composant html de notre table:

<ng-container matColumnDef="position">
  <mat-header-cell showCoulmn showInput="none" *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell showCoulmn showInput="none"    *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

Voici le modèle de travail: https://plnkr.co/edit/Woyrb9Yx8b9KU3hv4RsZ?p=preview

4
mohit uprim

pas besoin de directives.

juste utiliser

[caché] ça va marcher ex: [hidden] = "show" en html et Définissez show sur boolean dans le fichier ts.

mon code html: 

  1. Département {{element.department}}
1
Goutham S

La seule solution possible semble changer les colonnes affichées dans la classe de composants

displayedColumns = ['selected', 'id', ...];
0
avalon

Pour mon cas, le code CSS ci-dessous ne fonctionne pas.

display:none

Grâce à Rod Astrada, j’essaie d’ajouter le code ci-dessous dans mat-header-cell puis fonctionne, puis cela fonctionne!

[style.display]="'none'"

comme dans l'exemple suivant:

      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef [style.display]="'none'">Id</mat-header-cell>
        <mat-cell *matCellDef="let element" [style.display]="'none'"> {{element.id}} </mat-cell>
      </ng-container>
0
W Kenny

J'ai eu le même problème, où l'utilisateur peut afficher ou masquer des colonnes via une case à cocher. Je résous mon problème par un tuyau, comme ceci:

@Component({
  selector: "app-dynamic-table",
  template: `
    <mat-checkbox *ngFor="let column of columns" [(ngModel)]="column.show">{{column.name | titlecase}}</mat-checkbox>
    <mat-table #table [dataSource]="dataSource">
      ....
      <mat-header-row *matHeaderRowDef="displayedColumns | toggleColumns:columns;"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns | toggleColumns:columns;"></mat-row>
    </mat-table>
  `
})
export class DynamicTableComponent {
  private _columns = [
    {
      name: "date",
      show: true
    }, {
      name: "selected",
      show: true
    }, {
      name: "id",
      show: true
    }, {
      name: "location",
      show: true
    }
  ];

  get columns() { return this._columns; }
  get displayedColumns(): string[] { return this._columns.map(c => c.name); }
}

@Pipe({
  name: "toggleColumns"
})
export class ToggleColumnsPipe implements PipeTransform {
  transform(displayedColumns: string[], columns): string[] {
    displayedColumns = columns.filter(c => !!c.show).map(c => c.name);
    return displayedColumns;
  }

}

Maintenant, vous devez juste réussir à changer l'attribut show de la colonne à partir de true <=> false afin que la colonne disparaisse si show: false et qu'elle soit affichée lorsque show: true. Je fais cela comme vous voyez avec mat-checkbox.

0
Jameel

La solution proposée @John Smith ne m'a pas fonctionné. Au lieu de cela, j'ai utilisé cet ajustement:

 // css
 .hidden-item {
   display: none;
 }

 // html
 <ng-container matColumnDef="importDate">
   <mat-header-cell *matHeaderCellDef [ngClass]="{'hidden-item': showColumn()}"> Date
   </mat-header-cell>
   <mat-cell *matCellDef="let element" [ngClass]="{'hidden-item': showColumn()}"> {{element?.importDate}}
   </mat-cell>
 </ng-container>

 // ts
 showColumn(): boolean {
   return this.someService.hasAccess();
 }
0
Fran Ka

Il existe un moyen d'écrire du code corrompu pour les codes html et css, par exemple, spécifiez chaque colonne avec un identifiant, puis définissez une règle (telle que display: none;) pour les masquer si nécessaire. Considérant qu'une table va produire ligne par ligne, pas colonne par colonne.

Mais la manière correcte est la manière la plus commune et la plus simple qui estde changer la mappe de colonnes dans le composant(par exemple, lorsqu'un événement se déclenche).

0
Amirhossein Mehrvarzi

Si vous voulez masquer une ligne en raison de conditions variables, je vous suggère de suivre:

// css
.hidden-row {
  display: none;
}

// html
<ng-container matColumnDef="importDate">
  <mat-header-cell *matHeaderCellDef [ngClass]="showColumn()">
      Date
  </mat-header-cell>
  <mat-cell *matCellDef="let element" [ngClass]="showColumn()">
      {{element?.importDate}}
  </mat-cell>
</ng-container>

// ts
showColumn(): string {
  return this.someService.hasAccess() ? null : 'hidden-row';
}
0
user9131578