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當陣列更新時不從列表中刪除舊條目

回答

相關問題