Question

我有一个标准的mat表格，并已从angular / animation 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;
}

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

现在，当表加载时，动画仅适用于随机的几行，而其他行则像没有应用动画时那样仅出现。我一直试图弄清楚为什么它只适用于表中的几行。

任何帮助或建议将不胜感激。

更新看起来垫子排序是问题的原因，但我不确定如何解决。文件用我的排序代码更新。加载表格后，我是否需要对行进行排序和动画之间进行选择？

Answer 1

在仔细研究之后，我发现我的问题是我设置MatSort以及在DOM中渲染mat-table的时间（我的桌子上有一个* ngIf）。很痛苦的解决方案很明显，但是在呈现表或在我的情况下showTable === true之前，无法设置MatSort并将其分配给我的dataSource.sort。

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

表格行的角度动画不适用于所有行

1 个答案: