javascript - ng用于在更新数组时不从列表中删除旧条目

Question

我正在使用 ngFor 迭代一个简单的数组以输出列表项。

在某些时候，我想重新创建数组内容并更新 ngFor 内容。将数据推送到数组似乎按预期工作(即该项目被添加到组件模板中列表的末尾)但是当我从头开始重新创建数组时，旧数据似乎没有被删除？

tests =  [{output: '1'}, {output: '2'}];
clear(){
    this.tests = [{output: '3'},{output: '4'}];
    // this.tests.push({output:'b'});
}

模板

<button (click)="clear()">Clear</button>
<ul>
   <li *ngFor="let test of tests">{{test.output}}</li>
</ul>

预期输出应该是 1,2 的列表，单击按钮时，将列表重新创建为 3,4。我得到的是:3,4,1,2(旧数据保留在最后并且没有从 DOM 中删除？)在 1,2,b 中正确使用推送结果(最后附加了 b)。

我做错了什么？我怎样才能有效地重新创建数组的内容并要求 ngFor 删除旧的 DOM 并正确地重复内容？

我尝试过手动使用触发事件更改(例如 changeDetectorRef 和 NgZone，甚至是顶级应用程序引用)，但没有一个能按预期工作。

Answer 1

试试这个是否可行

tests =  [{output: '1'}, {output: '2'}];
clear(){
    this.tests = [];
    this.tests = [{output: '3'},{output: '4'}];
    // this.tests.push({output:'b'});
}