Угловая анимация на строке таблицы не применяется ко всем строкам

Question

У меня есть стандартная таблица матов, и я применил анимацию из угловых / анимационных API, чтобы строки загружались слева при загрузке таблицы.

table.html

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" *ngIf="showTable === true" 
  matSort
  matSortStart = "asc"
  matSortDirection="asc"
  matSortActive="brandName">

  <ng-container matColumnDef="brandName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header><h5>Brand</h5></th>
    <td mat-cell *matCellDef="let row">{{row.brandName}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header><h5>Account Number</h5></th>
    <td mat-cell *matCellDef="let row">{{row.name}}</td>
  </ng-container>

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

table.ts

@Component({
 selector: 'brand-account',
 templateUrl: 'brand-account.component.html',
 styleUrls: ['brand-account.component.scss'],
 animations: [rowsAnimation],
})
export class BpDiscountsComponent implements OnInit {

 displayedColumns: string[] = ['tradeAgreementGroupName', 'groupDiscount', 'definition'];
 dataSource: MatTableDataSource<TradeAgreement> = new 
 MatTableDataSource<TradeAgreement>();

private sort: MatSort;
@ViewChild(MatSort) set matPaginator(st: MatSort) {
 this.sort = st;
 this.setDataSourceAttributes();
}

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

rowAnimation.ts

import { trigger, sequence, animate, transition, style } from '@angular/animations';

export const rowsAnimation = 
trigger('rowsAnimation', [
  transition('void => *', [
    style({ height: '*', opacity: '0', transform: 'translateX(-550px)', 'box-shadow': 'none' }),
    sequence([
      animate(".25s ease", style({ height: '*', opacity: '.2', transform: 'translateX(0)', 'box-shadow': 'none'  })),
      animate(".25s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)' }))
    ])
  ])
]);

В настоящее время анимации применяются только к случайным нескольким строкам, когда таблица загружается, а остальные просто отображаются так, как онибудет без анимации.Я застрял при попытке выяснить, почему он применяется только к нескольким строкам таблицы.

Любая помощь или предложения будут высоко оценены.

Обновление ЭтоПохоже, что проблема связана с сортировкой матов, но я не знаю, как ее исправить.Файлы обновляются с моим кодом сортировки.Нужно ли выбирать между сортировкой и анимацией для моих строк при загрузке таблицы?

Answer 1

Пролистав его, я обнаружил, что моя проблема связана с синхронизацией, когда я настраивал MatSort и когда моя таблица матов отображалась в DOM (у меня есть * ngIf в таблице).Решение до боли очевидно, но MatSort не может быть установлен и назначен моему dataSource.sort до тех пор, пока таблица не будет отрисована или в моем случае showTable === true.

1. MatSort установлен в значение локальной переменной в ViewChild
2. Mat Table должен быть обработан
3. данные источника данных
4. локальный matSort назначен datasource.sort
5. Анимация работает отлично!