你好我使用Angular2,想要获取服务器,并得到一些值为每个ID我进去ngFor。
<div *ngFor="let item in items">
<span> here call a function that do something with 'item' and return something new <span>
</div>
您可以使用自定义的指令,呼吁每个迭代的方法:
import { Directive, Output, EventEmitter, Input, SimpleChange} from '@angular/core';
@Directive({
selector: '[onCreate]'
})
export class OnCreate {
@Output() onCreate: EventEmitter<any> = new EventEmitter<any>();
constructor() {}
ngOnInit() {
this.onCreate.emit('dummy');
}
}
然后你可以用它在你的* ngFor调用该方法在组件:
<div *ngFor="let item of items">
<div *ngIf="item" (onCreate)="yourMethod(item)">
</div>
</div>
在你的组件,您可以调用此方法为:
yourMethod(item){
console.log(item);
}
听起来不是很好,但是,最简单的方法:
<div *ngFor="let item of items">
<span data-dummy="{{myFunction()}}" > here call a function that do something with 'item' and return something new <span>
</div>
合适的方式 :
@Directive({
selector: '[runDummyFunc]'
})
export class runDummyFunc {
constructor() {}
ngOnInit() {
this.runDummyFunc()
}
}
<div *ngFor="let item in items">
<span [runDummyFunc]="myFunction" > here call a function that do something with 'item' and return something new <span>
</div>
在你的类:
myFunction = ():void=>{
console.log('whatever');
}
怎么样进来打字稿本身*ngFor
之前变化的数据,
this.items.forEach((item,index)=>{
item=this.func(item,index);
})
func(item,index):string{
return item+ String(index); //do whatever you wish to do.
}
更好地做一个认购ngOnInit每个项目,例如函数调用,然后他们应该与* ngFor改造后显示。
和更改:
<div *ngFor="let item in items">
至
<div *ngFor="let item of items">
模板是不是要做到这一点,你想在组件代码数据的地方。听起来像是你想使用类似的观察到的,它可以让你返回另一个观察到的,在源可观察每个项目的flatMap
。这可能是一个HTTP API调用或任何(fiddle)的回报:
var ids = ["a", "d", "c"];
var lookupValues = { "a": 123, "b": 234, "c": 345, "d": 456 };
// given an id
function fakeApiCall(id) {
// given an id, return an observable with one entry: an object consisting
// of an 'id' property with that id value and a 'lookup' property with the
// value from lookupValues for that id
return Rx.Observable.just({ id: id, lookup: lookupValues[id] });
}
var o1 = Rx.Observable.from(ids); // 'a, d, c
var o2 = o1.flatMap(x => {
// here we get each value from o1, so we do an api call and return
// an observable from each that will have the values in that
// observable combined with all others to be sent to o2
return fakeApiCall(x);
});
o2.subscribe(x => {
document.write(JSON.stringify(x) + "<br/>");
});
// result:
// {"id":"a","lookup":123}
// {"id":"d","lookup":456}
// {"id":"c","lookup":345}
您可以使用trackBy:
@Component({
selector:'heroes',
template: `
<table>
<thead>
<th>Name</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes; trackBy: trackHero" >
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>`})
export class Heroes {
heroes = HEROES;
trackHero(index, hero) {
console.log(hero);
}
}
不知道这是你在问什么,但你可以在项目传递给函数像这样的事件变量一起:
<div *ngFor="let item in items">
<span (click)="functionCall($event, item)"> <span>
</div>
然后抢项类是这样的:
functionCall(event, item): void {
console.log('item clicked:", item)
}
Component({
selector:'heroes',
template: `
<table>
<thead>
<th>Name</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes; trackBy: trackHero" >
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
`
})
export class Heroes {
heroes = HEROES;
trackHero(index, hero) {
console.log(hero);
return hero ? hero.id : undefined;
}
}