Question

我正在学习Angular2＆amp; 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的更多研究并查看已关闭的错误，我设法将缺失的部分组合在一起。我发布了答案，希望它可以帮助其他人避免这个问题。它在ngFor api中有记录（有点），所以我不认为它本身就是一个bug。

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

ngFor <form>中的行为

1 个答案: