Angular Table 行上的动画不适用于所有行

Question

我有一个标准垫子 table 并应用了 angular/animation api 的动画，以便在加载 table 时让行从左侧滑入。

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;
}

rowsAnimation.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)' }))
    ])
  ])
]);

现在，当 table 加载时，动画仅适用于随机的几行，而其他行则与未应用动画时一样出现。我一直在试图弄清楚为什么它只适用于 table.

中的几行

如有任何帮助或建议，我们将不胜感激。

更新看起来 mat sort 是问题的原因，但我不确定如何解决它。文件使用我的排序代码更新。当 table 加载时，我是否必须在我的行的排序和动画之间进行选择？

Answer 1

在深入研究之后，我发现我的问题是我设置 MatSort 的时间以及我的 mat-table 在 DOM 中呈现的时间（我有一个 *ngIf table)。解决方案非常明显，但在呈现 table 或在我的情况下显示 Table === true.

之前，无法设置 MatSort 并将其分配给我的 dataSource.sort

MatSort 设置为 ViewChild 中的本地变量
Mat Table 需要渲染
数据源给定数据
本地 matSort 分配给 datasource.sort
动画效果很好！

Angular Table 行上的动画不适用于所有行

Angular Animation on Table Row not apply to all rows

angular

angular-material

angular-animations

angular-material-table