Tri de la table de matériau angulaire - Les données ne trient pas lorsque vous êtes à l'intérieur d'une condition * NGIF

Merci Danil, votre suggestion a fonctionné, mais uniquement lorsque le * NGIF a été évalué à vrai lorsque la vue de l'initialisation.

La solution que j'utilise maintenant est la suivante: xxx

ceci était basé sur des informations de: angulaire 2 @viewchild in * ngif

Solution de travail complète à: https://stackblitz.com/edit/angular-quzvjv-jzdbb6

base sur la solution Tri de la table de données 5 angulaires de matériau ne fonctionne pas

en angulaire 8, le @viewchild code> Decorator a besoin d'un second argument {statique: true | faux} code> p>

pour attraper MATSORT CODE> Composant Après RENDUE DOM, SET {STATIC: FALSE} CODE>: P>

export class TableSortingExample{

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

en angulaire 8, nous pouvons facilement obtenir un tri de table et une pagination multiples / uniques à l'intérieur * NGIF. Dans l'exemple ci-dessous, j'utilise "NG-Template" afin d'afficher / masquer la table à l'aide de * NGIF Autres.

Mon échantillon * Format NGIF P>

@ViewChild('snowSort', { static: false }) set matSnowSort(snowSort: MatSort) {
this.snowSort = snowSort;
if (this.snowDataSource !== null && this.snowDataSource !== undefined) {
    this.snowDataSource.sort = this.snowSort;
}}

@ViewChild('snowPaginator', { static: false }) set matSnowPaginator(snowPaginator: MatPaginator) {
this.snowPaginator = snowPaginator;
if (this.snowDataSource !== null && this.snowDataSource !== undefined) {
    this.snowDataSource.paginator = this.snowPaginator;
}}

@ViewChild('transactionSort', { static: false }) set matTransactionSort(transactionSort: MatSort) {
this.transactionSort = transactionSort;
if (this.transactionDataSource !== null && this.transactionDataSource !== undefined) {
    this.transactionDataSource.sort = this.transactionSort;
}}

@ViewChild('transactionPaginator', { static: false }) set matTransactionPaginator(transactionPaginator: MatPaginator) {
this.transactionPaginator = transactionPaginator;
if (this.transactionDataSource !== null && this.transactionDataSource !== undefined) {
    this.transactionDataSource.paginator = this.transactionPaginator;
}}

private transactionSort: MatSort;
private transactionPaginator: MatPaginator;
private snowSort: MatSort;
private snowPaginator: MatPaginator;
payIdTransactions: TLItem[];
snowCases: Cases[];
transactionDataSource: MatTableDataSource<TLItem>;
snowDataSource: MatTableDataSource<Cases>;

private getTransactions(startDate: string, endDate: string) {
    this.payIdTransactions = results.getTransactionsResponse.TLItems.TLItem;
    this.transactionDataSource = new MatTableDataSource(this.payIdTransactions);
}
private getSnowCases(startDate: string, endDate: string) {
    this.snowCases = results.getCasesResponse.cases;
    this.snowDataSource = new MatTableDataSource(this.snowCases);
}