1

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

表.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>

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

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

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

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

4

1 回答 1

1

在深入研究之后，我发现我的问题是设置 MatSort 以及在 DOM 中呈现我的 mat-table 时的时间（我在桌子上有一个 *ngIf）。解决方案非常明显，但 MatSort 无法设置并分配给我的 dataSource.sort，直到表格呈现或在我的情况下 showTable === true。

  1. MatSort 在 ViewChild 中设置为本地变量
  2. Mat Table 需要渲染
  3. 数据源给定数据
  4. 分配给 datasource.sort 的本地 matSort
  5. 动画效果很好！
于 2019-02-15T15:17:19.900 回答