我有一个Item容器和项目模式,其中应该添加子项目并从其容器中删除.添加很好,而删除什么都不做.当删除任何子项时,angular2*ngFor指令似乎不起作用.
import { NgFor} from 'angular2/common';
import { bootstrap } from 'angular2/platform/browser';
import { Component, View, Directive, OnDestroy, Input, enableProdMode } from 'angular2/core';
import { CORE_DIRECTIVES} from 'angular2/common';
@Component({selector: 'itemcontainer',})
@View({ template: `<ul (click)="$event.preventDefault()">
<li *ngFor="#it of items">Any Item</li>
</ul>
<div><ng-content></ng-content></div>`,
directives: [NgFor],
})
export class ItemContainer {
public items: Array<Item> = [];
public addItem(item: Item) {
this.items.push(item);
}
public removeItem(item: Item) {
var index = this.items.indexOf(item);
if (index === -1) {
return;
}
console.log(`Index about to remove: ${index} this.items …我在*ngfor循环中使用密钥管道.数据以JSON格式提供.
@Pipe({
name: 'keys'
})
export class KeysPipe implements PipeTransform {
transform(value, args: string[]): any {
if (!value) {
return value;
}
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
-
<div *ngFor="let item of jsonObject | keys">
<p>{{ item.value.code }}</p>
</div>
问题是当我删除JSON中的元素时,ngFor没有更新.
我已经尝试了两个选项:
如果还有其他方法吗？
谢谢!
我有一个*ngFor,我获取一个英雄列表.现在,如果我改变英雄的价值,我的英雄也应该改变,你怎么做,最好的方式......
<li *ngFor="#hero of heroes">
<input type="text" [value]="hero.name"/>
</li>
我只知道制作一个(更改)="UpdateListByItem(item)"的方法来调用一个方法,但是没有办法为所有项目制作一个双向数据绑定？
我有一个简单的管道,可以过滤一系列学生.这是代码(Plnkr)
import {Pipe} from 'angular2/core';
@Pipe({
name: 'sortByName',
pure: false
})
export class SortByNamePipe {
temp = [];
// i = 0;
transform (value, [queryString]) {
// console.log(this.i++);
// console.log(value, queryString);
// This does not work
this.temp = value.filter((student)=>(student)=>student.name.includes(queryString)))
return value.map(function(val){ return val.name.toUpperCase()});
// This works
// this.temp.length = 0;
// this.temp.push(...value.filter((student)=>student.name.includes(queryString)))
// return this.temp;
}
}
正如您在Plnkr中看到的,Angular使用第一种方法抛出错误.
EXCEPTION: Expression 'students | sortByName:queryElem.value in HelloWorld@7:6' has changed after it was checked. Previous value: 'SON,DAVID'. Current value: 'SON,DAVID' in …我制作了一个搜索组件，它有一个输入字段，可以在输入时过滤搜索结果列表。我还有一个 websocket，可以将新的或更改的值推送到列表中，如下所示：
this._fooService.foos.subscribe(foos => {
this.foos = foos;
});
当我更改过滤器搜索词时没有过滤器和列表更新时，这很好用。在模板中，它很简单：
<div *ngFor="let foo of foos | filterFoos: searchTerm">
我试过这样做：NgFor 不使用 Angular2 中的管道更新数据
但它没有奏效。我的另一个视图中有相同类型的带有条形的搜索组件，它与过滤器一起工作得很好。虽然有一个承诺，需要在 this.bars = bar 运行之前完成。
编辑：
_fooService.foos 是 Observable<Foo[]>并且在构造函数中初始化：
this.foos = this._fooObservable.asObservable();
其中 _fooObservable 是 BehaviorSubject<Foo[]>并且使用 .next 方法（以及旧的 Foos）向其中添加新的 Foos。
过滤管是这样的：
@Pipe({name: 'filterFoos'})
export class FilterFoosPipe implements PipeTransform {
transform = (foos: Foo[], searchTerm: string = ""): any => {
let filtered = foos.filter((foo) => {
return foo.name.toLowerCase().includes(searchTerm.toLowerCase())
});
return filtered;
}
}