web-dev-qa-db-fra.com

le filtrage de tapis / tri de tapis ne fonctionne pas correctement lorsque vous utilisez ngif dans le parent de la table de tapis

Notez que la pagination/tri ne fonctionne pas correctement. La pagination n'affiche pas le nombre d'éléments qu'elle affiche et le tri ne fonctionne pas, mais si vous supprimez la ligne dans le fichier html * ngIf = "dataSource? .FilteredData.length> 0" l'erreur est corrigée. Si vous utilisez le filtrage, cela fonctionne, mais il n'affiche pas la quantité de filtre

Vérifiez l'exemple.

https://stackblitz.com/edit/angular-wqkekh-nm3pn2?file=app/table-pagination-example.html

angularangular-materialangular6
9
avechuche

Dans votre component.ts, remplacez ce code

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

avec ça :

  private paginator: MatPaginator;
  private sort: MatSort;


  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

Et dans votre html:

    <mat-card *ngIf="!dataSource?.filteredData.length" style="margin-bottom: 5px">
        <div><span>ZERO RESULT</span></div>
    </mat-card>

    <mat-card *ngIf="dataSource?.filteredData.length">
    ** insert the table code that you have **
    </mat-card>
17
yer

Cela peut être résolu par la stratégie suivante:

dataSource = new MatTableDataSource();

@ViewChild(MatSort, {static: false}) set content(sort: MatSort) {
  this.dataSource.sort = sort;
}

Maintenant, même si vous utilisez * ngIf, cela fonctionnera.

2
Rut Shah

Il suffit d'ajouter statique: faux au lieu de vrai, fonctionne correctement @ViewChild (MatSort, {statique: faux}) e}) public sortaddEpisode: MatSort;

0
Sundar svce