我正在学习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){}
}
答案 0 :(得分:2)
好的,经过对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;
}