<form> 内的 ngFor 行为

Question

我正在学习 Angular2 和 RxJS 可观察对象。我创建了一个简单的表格来显示模拟 http.get 的结果，并且应该允许用户创建一个新项目。

我使用 unshift() 来完成这个（而不是 push()）因为我想将新项目添加到 ngFor 引用的数组的顶部，并通过扩展到显示列表的顶部项目，但是当我使用这种方法时，我看到了一些不需要的行为。将新项添加到数组时，修改现有输出的第一项。

正如我所说，我只是在学习，所以如果我遗漏了一些明显的东西，请耐心等待，但是有人可以帮助我了解这里发生的事情吗？我创建了这个 plunk 来说明我的问题。任何见解将不胜感激。

https://embed.plnkr.co/FGi1ot/

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'demo',
template: `
    <button (click)="createItem()">Create</button>
    <button (click)="getItems()">Reset</button>

<form>
    <div class="form-group" *ngFor="let item of items; let i=index"  >
        <div style="padding-top: 50px;">
            <div class="col-xs-4">
                <label id="itemIdLabel-{{i}}" for="itemIdDiv-{{i}}">Id</label>
                <div id="itemIdDiv-{{i}}">{{item.id}}</div>                                                        
            </div>

            <div class="col-xs-8">
                <label id="itemNmLabel-{{i}}" for="itemNmInput-{{i}}">Name</label>
                <input id="itemNmInput-{{i}}" name="itemNmInput-{{i}}" [(ngModel)]="item.nm" type="text" class="form-control">
            </div>

            <div class="row" style="padding-top: 10px;">
                <div class="col-xs-12">
                    <button (click)="deleteItem(item.id, i)">Delete</button>
                </div>
            </div>

        </div>
    </div>
</form>
`,
})

export class DemoComponent implements OnInit{
items = new Array<Item>();

constructor() {}

ngOnInit(){
    this.getItems();
}

getItems(){
  this.initItems();
}

createItem(){
  //create a new item without an id.  this will be committed once required fields are filled

  //this works fine
  //this.items.push(new Item("new", "newItem"));

  //this does not
  this.items.unshift(new Item("new", "newItem"));
}

deleteItem(id, index){
  this.items.splice(index,1);
}

  initItems(){
    //simulating data coming back from a web service call with ids intact
    this.items.length = 0;
    this.items.push(new Item("first", "firstItem"));
    this.items[0].id = '001';

    this.items.push(new Item("second", "secondItem"));
    this.items[1].id = '002';

    this.items.push(new Item("third", "thirdItem"));
    this.items[2].id = '003';

  }
}

export class Item {
public id: string;

constructor(public nm: string,
public dsc: string){}
}

Answer 1

好的，在对 ngFor 进行更多研究并查看已关闭的错误后，我设法将缺失的部分拼凑在一起。我发布了答案，希望它可以帮助其他人避免这个问题。它在 ngFor api 中有记录（有点），所以我认为它本身不属于错误。

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

问题与更改跟踪有关。似乎 ngFor 需要显式标识才能成功重绘 DOM 元素。然而，我还没有真正注意到 <form> 之外的这种行为，所以那里一定有一些互动。

无论如何……Angular2 很棒。继续。这里没什么可看的了:)

这是一个更新的 plunk，其功能与预期的一样

https://plnkr.co/edit/g8fDquNgUY9MYoget8O4

我在上面的示例中更改的元素如下。

<div class="form-group" *ngFor="let item of items; let i=index; trackBy:itemIdentity">

...

itemIdentity(index, item) {
console.log("index:{i}, item:{s}", index, item)
return index;
}

<form> 内的 ngFor 行为

ngFor behavior inside a <form>

angular2-template

ngfor

angular