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'});
}

Answer 2

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

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

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

Answer 3

检查这个plunker，它做了预期的

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

ng更新数组时不从列表中删除旧条目

3 个答案: