角度模型和渲染不同步

我有一个Angular组件,它有一个按钮,可以将一个新对象添加到一个充当模型的数组中.在我的组件模板中,我有一个* ngFor循环,它遍历数组中的对象并显示对象属性的输入字段.我还在每个对象旁边都有一个“删除”按钮,用于从数组中删除对象.当我执行以下步骤时,UI与模型不同步,并清空除第一个项目之外的所有项目的字段.

>单击“添加”按钮,向阵列中添加3个新对象
>使用一些数据填充输入字段
>单击中间项目上的“删除”按钮将其删除
>单击“添加”按钮添加1个新对象

用户界面与模特不同步的原因是什么？

这是一个演示Example问题的Plunker示例
我还在模板中添加了一行,显示了模型数组中的内容.

@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;
}

不要使用索引i为name属性赋值.从数组中拼接项目时我不稳定所以你必须为每个新添加的东西生成一个唯一的id(我提供了一个生成唯一id的exemple函数).

以下代码有效：

//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;
}

角度模型和渲染不同步

猜你在找的Angularjs相关文章