ngFor内部的行为<form>

Question

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

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

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

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进行了更多研究并查看了已关闭的bug之后，我设法将缺失的部分放在一起。 我正在发布答案，希望它可以帮助其他人避免此问题。 它在ngFor api中有记录（某种），所以我不认为它本身就是错误。

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

问题与变更跟踪有关。 ngFor似乎需要显式身份才能成功重绘DOM元素。 我还没有真正注意到<form>之外的行为，因此必须在其中进行一些交互。

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

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

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