ngFor当阵列更新时不从列表中删除旧条目

我正在使用ngFor迭代一个简单的数组以输出列表项。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，甚至顶级应用程序参考），但没有一个按需要工作。

来源

2017-10-17 NJ.

您的代码对我有用 – Eliseo

奇怪的是，我刚安装了一个Plunkr来测试它，它确实按预期工作。但在我的本地应用程序中，我似乎无法使其工作。任何想法，为什么这可能是？见下面的gif。 https://gyazo.com/fbfa505ae7bab0bd117c49e8c7c14588 –

Doh！排除故障超过2小时后，问题是由另一个模块的控制台中的一些不相关的错误引起的。猜猜它以某种方式干扰了修改DOM。感谢您的帮助。 –

尝试这样做也许能行得通

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

来源

2017-10-17 12:02:26 mayur

我建议不更换tests变量的值，但首先使其空通过设置tests.length = 0，然后通过push添加值：

tests = [{output: '1'}, {output: '2'}]; 

clear() { 
    this.tests.length = 0; 
    this.tests.push(...[{output: '3'}, {output: '4'}]); 
}

来源

2017-10-17 12:04:25

看看这个运动员，它做什么预计

https://plnkr.co/edit/WzPdaD1AYfmJxLhhYZnk?p=preview

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <button (click)="clear()">Clear</button> 
<ul> 
    <li *ngFor="let test of tests">{{test.output}}</li> 
</ul> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    tests = [{output: '1'}, {output: '2'}]; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    clear(): void { 
    this.tests = [{output: '3'}, {output: '4'}]; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

来源

2017-10-17 12:13:32

ngFor当阵列更新时不从列表中删除旧条目

回答

相关问题