角度模型和渲染不同步

Question

我有一個Angular組件，它有一個按鈕，它將一個新對象添加到作爲模型的數組中。在我的組件模板中，我有一個* ngFor循環，遍歷數組中的對象並顯示對象屬性的輸入字段。我還在每個從數組中刪除對象的對象旁邊都有一個「刪除」按鈕。當我執行以下步驟時，UI將與模型不同步並清空除第一個項目之外的所有項目的字段。

1. 通過單擊「添加」按鈕
2. 填充了一些數據輸入字段添加到陣列3個的新對象
3. 點擊中間的項目刪除按鈕來刪除它
4. 新增1通過點擊「添加」按鈕的對象

什麼使UI與模型不同步？

這是一個Plunker示例，演示了問題Example 我還在模板中添加了一行顯示模型數組中的內容。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <button (click)="things.push({})">+ Add new thing</button> 
     <br /> 
     <br /> 
     <form #contactForm="ngForm"> 
     <ng-container *ngFor="let thing of things;let i = index"> 
      <input [(ngModel)]="thing.name" name="name-{{i}}" id="name-{{i}}" placeholder="name"/> 
      <br /> 
      <input [(ngModel)]="thing.otherstuff" name="other-{{i}}" id="other-{{i}}" placeholder="other" /> 
      <button (click)="things.splice(i, 1)">Remove</button>   
      <br /> 
      <br /> 
     </ng-container> 
     </form> 
     {{things | json}} 
    </div> 
    `, 
}) 
export class App { 
    things: Awesome[] 
    constructor(){ 
    this.things = new Array(); 
    } 
} 

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

export class Awesome{ 
    name?: string; 
    otherstuff?: string; 
} 

Answer 1

不要使用索引我給價值名屬性。 i當你從數組中拼接項目時不穩定，所以你必須爲每個新增的東西（我提供了一個生成唯一ID的例證函數）生成一個唯一的ID。下面

代碼工作：

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

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <button (click)="addEmptyItem()">+ Add new thing</button> 
     <br /> 
     <br /> 
     <form> 
     <ng-container *ngFor="let thing of things"> 
      <input [(ngModel)]="thing.name" name="name-{{thing.id}}" id="name-{{thing.id}}" placeholder="name"/> 
      <br /> 
      <input [(ngModel)]="thing.otherstuff" name="other-{{thing.id}}" id="other-{{thing.id}}" placeholder="other" /> 
      <button (click)="removeItem(thing)">Remove</button>   
      <br /> 
      <br /> 
     </ng-container> 
     </form> 
     {{things | json}} 
    </div> 
    `, 
}) 
export class App { 

    things: Awesome[] 
    constructor() { 
     this.things = new Array(); 
    } 
    removeItem(thing): void { 
     this.things = this.things.filter(th => th.name !== thing.name); 
    } 
    addEmptyItem(): void { 
     let newItem = new Awesome(); 
     newItem.id = this.guid(); 
     this.things.push(newItem); 
    } 

    private guid() { 
     let uniqueId = Math.random().toString(36).substring(2) 
      + (new Date()).getTime().toString(36); 
     return uniqueId; 
    } 
} 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule 
    ], 
    declarations: [App], 
    bootstrap: [App] 
}) 

export class AppModule { 
} 

export class Awesome { 
    id?: string; 
    name?: string; 
    otherstuff?: string; 
}