如何讓Angular 2/4更新現有的DOM節點而不是刪除+創建它們？

Question

我的角4應用程序具有refresh方法，拉入一個大對象從我的網絡服務，像這樣一個組件：

的DTO /型號類型：

class NuclearReactorStatus { 

    public reactorName: string; 
    public coolingRods: CoolingRodStatus[]; // array of 1024 elements 
} 

class CoolingRodStatus { 
    public rodId  : number; 
    public temperature: number; 
    public status  : string; 
} 

的NuclearReactorDisplayComponent內：

public reactorStatus: NuclearReactorStatus; 

refresh(): void { 

    this.http.get<NuclearReactorStatus>() 
     .subscribe(
      status => { 
       this.reactorStatus = status; 
      }, 
      err => { 
       console.error(err); 
      } 
     ); 
} 

裏面我nuclearreactordisplay.component.html

<h1>Reactor {{reactorStatus.reactorName}}</h1> 

<h2>Cooling rods</h2> 
<ol *ngIf="reactorStatus.coolingRods"> 
    <li *ngFor="let rod of reactorStatus.coolingRods" 
     [data.rod-id]="rod.rodId" 
     [data.rod-temperature]="rod.temperature" 
     class="{{ rod.temperature < 100 ? "cool" : rod.temperature < 1000 ? "warm" : rod.temperature < 10000 ? "hot" : "jalapeno" }}" 
    > 
     <span>{{rod.rodId}}</span> 
    </li> 
</ol> 

我被安排他們到網格造型杆<li>元素：

ol { 
    display: flex; 
    flex-wrap: wrap; 
    list-style: none; 
    width: calc(32 * 16px); // grid is 32 elements wide, 32x32 == 1024 
} 
li { 
    display: block; 
    width: 16px; 
    height: 16px; 

    transition: background-color 0.2s; 
} 
li span { 
    display: none; 
} 

li.cool  { background-color: black; } 
li.warm  { background-color: orange; } 
li.hot  { background-color: yellow; } 
li.jalapeno { background-color: red; } 

注意我用的transition: background-color如此棒的盒子的背景顏色逐漸變化，而不是一下子。

當我運行我的程序，我注意到，角實際上取代的<ol>和所有的孩子每個數據刷新，而不是使用現有的DOM和更新class屬性時<li>元素 - 所以我background-color過渡從未發生過 - 但更令人震驚的是我的電腦skyrockets的CPU使用率，因爲這樣操作DOM的代價。

如何讓Angular重新使用它在模板中創建的<ol>和<li>元素，而不是在每個刷新週期中刪除並重新創建它們？

Answer 1

由於ngFor可以瓶坯不好的時候數據列表是巨大的，角度提供了一個trackBy，你可以告訴角度如何以取代現有的DOM元素。看詳情here。

<ol *ngIf="reactorStatus.coolingRods"> 
    <li *ngFor="let rod of reactorStatus.coolingRods; trackBy: trackByFun" 
    [data.rod-id]="rod.rodId" 
    [data.rod-temperature]="rod.temperature" class="{{ rod.temperature < 100 ? "cool" : rod.temperature < 1000 ? "warm" : rod.temperature < 10000 ? "hot" : "jalapeno" }}"> 
    <span>{{rod.rodId}}</span> 
    </li> 
</ol> 

TrackByFun：

// assume you want to regenerate DOM element when rodId changed. 
trackByFun(index: number, rod) { 
    return rod.rodId;    
}