Question

我有一个用Angular材质创建的表格，如下所示：

<mat-table #table [dataSource]="dataSource" matSort>
<ng-container *ngFor="let item of displayedColumns; let i = index" cdkColumnDef="{{getColumnName(i)|Formater:'clean'}}">
    <mat-header-cell *cdkHeaderCellDef mat-sort-header class="example-header-cell"> {{item.split('__')[0]}} </mat-header-cell>
    <mat-cell *cdkCellDef="let row">
      {{row.values[i]|Formater:'delta'}}
    </mat-cell>
</ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></mat-header-row>
<mat-row *cdkRowDef="let row; columns: displayedColumns;let index=index"
    class="example-row" (click)="onClick(row, index)" #cdkrow></mat-row>

并且我跟着this示例在单击行时添加详细信息表，问题是添加了运行时的时间，并且在列排序之后，在该行的旧位置添加了新详细信息在排序之前，任何人都可以帮助如何在排序后获取行的新位置，因此我可以使用它来推送新运行时创建的对象。

Answer 1

当您添加或删除属于* ngFor的DOM元素时，必须使用trackBy选项，以帮助Angular跟踪元素。

所以在* ngFor：

的视图中添加它

"....;trackBy: trackByFn"

这个在课堂上：

  trackByFn(index, item) {
    return index;
  }

当迭代器的内容发生变化时，NgForOf会生成   对DOM的相应更改....

否则，该项目的DOM元素将保持不变。角   使用对象标识来跟踪内部的插入和删除   迭代器并在DOM中重现这些更改。

要自定义默认跟踪算法，NgForOf支持trackBy   选项。 trackBy接受一个有两个参数的函数：index和   项目。如果给出了trackBy，则Angular跟踪返回值的变化   功能。

语法
<li *ngFor="let item of items; index as i; trackBy:
> trackByFn">...</li> <li template="ngFor let item of items; index as i;
> trackBy: trackByFn">...</li> With <ng-template> element:



>  content_copy <ng-template ngFor let-item [ngForOf]="items"
> let-i="index" [ngForTrackBy]="trackByFn">   <li>...</li>
> </ng-template>

<小时/> 在此处阅读更多内容：https://angular.io/api/common/NgForOf#change-propagation

在这里：https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

Angular Material表，运行时在排序时按行

1 个答案: