角材料表，運行時間排序時

我有一個表與角料創建的，像這樣推行：角材料表，運行時間排序時

<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例如添加詳細信息表時，該行點擊，問題是當它的運行時間被添加，並且在列被排序之後，在排序之前的舊的地方的新細節，可以幫助如何在排序之後獲得行的新位置，所以我可以使用它來推動新運行時創建的對象。

來源

2017-10-16 Abd

當您添加或刪除屬於* ngFor的DOM元素時，您必須使用trackBy選項來幫助Angular保留元素的軌跡。

"....;trackBy: trackByFn"

在類這：

所以在* ngFor的視圖中添加此

trackByFn(index, item) { 
    return index; 
    }

當迭代器的內容發生變化，NgForOf使得相應的變化到DOM ....

否則，該項目的DOM元素將保持不變。 Angular 使用對象標識來跟蹤迭代器中的插入和刪除，並在DOM中再現這些更改。

要定製默認跟蹤算法，NgForOf支持trackBy 選項。 trackBy接受一個具有兩個參數的函數：index和 item。如果給出了trackBy，則角度跟蹤會根據函數的返回值進行更改。

語法
<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

來源

2017-10-16 15:34:37 Vega

非常感謝，工作就好了。 – Abd

太棒了！不用謝：） – Vega

角材料表，運行時間排序時

回答

相關問題