Angular Materialtabelle, Laufzeitreihe geschoben, wenn

Question

Sortierung Ich habe eine Tabelle mit kantigem Material geschaffen, wie folgt aus:

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

und ich folgte this Beispiel eine Detailtabelle hinzufügen, wenn die Zeile geklickt , das Problem ist, wenn in der Laufzeit hinzugefügt, und nachdem die Spalte sortiert wurde, das neue Detail an der alten Stelle, wo die Zeile vor der Sortierung war, kann jemand helfen, wie man den neuen Platz der Zeile nach der Sortierung bekommt, also ich kann es vielleicht verwenden, um das neu erstellte Objekt zu verschieben.

Answer 1

Wenn Sie DOM-Elemente hinzufügen oder entfernen, die Teil von * ngFor sind, müssen Sie die Option trackBy verwenden, um Angular dabei zu unterstützen, die Verfolgung von Elementen beizubehalten.

Also das auf * ngFor in der Ansicht hinzufügen:

"....;trackBy: trackByFn" 

und dies in der Klasse:

trackByFn(index, item) { 
    return index; 
    } 

Wenn die Inhalte der Iterator Änderungen, NgForOf macht die entsprechenden Änderungen zum DOM ....

Andernfalls bleibt das DOM-Element für diesen Artikel gleich. Angular verwendet Objektidentität, um Einfügungen und Löschungen innerhalb des Iterators zu verfolgen und diese Änderungen im DOM zu reproduzieren.

Um den Standard-Tracking-Algorithmus anzupassen, unterstützt NgForOf trackBy Option. trackBy nimmt eine Funktion, die zwei Argumente hat: index und item. Wenn trackBy angegeben ist, ändert sich die Winkelspur um den Rückgabewert der Funktion.

Syntax

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

---

Lesen Sie mehr hier: https://angular.io/api/common/NgForOf#change-propagation

und hier: https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5