如何让Angular 2/4更新现有DOM节点，而不是删除+；创造它们？

Angular 4应用程序有一个组件，它有一个

刷新
方法，可以从我的web服务中提取一个大对象，如下所示：

DTO/型号类型：

class NuclearReactorStatus {

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

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

在
核反应堆显示组件内部
：

public reactorStatus: NuclearReactorStatus;

refresh(): void {

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

我正在通过将棒
元素排列成网格来设置其样式：

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
，因此杆盒的背景色逐渐变化，而不是突然变化

当我运行我的程序时，我注意到Angular实际上每次数据刷新时都会替换
和所有子
元素，而不是使用现有DOM和更新
类
属性-因此我的
背景色
转换从未发生过-但更令人担忧的是，由于以这种方式操作DOM的费用

如何重新使用它在模板中创建的
和
元素，而不是在每个刷新周期中删除和重新创建它们？
因为
ngFor
在数据列表庞大时可能会执行错误，Angular提供了一个trackBy，您可以告诉Angular如何替换现有的DOM元素。请参阅详细信息

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

非常感谢。这就成功了，现在我的页面刷新得像黄油一样光滑。
<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>

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