Question

您好我正在使用Angular2并且想要获取服务器并为我在ngFor中获取的每个ID获取一些值。

<div *ngFor="let item in items">
  <span> here call a function that do something with 'item' and return something new <span>
</div>

Answer 1

您可以使用自定义指令为每次迭代调用方法：

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

Answer 2

听起来不是很好，但最简单的方法是：

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

Answer 3

在打字稿本身<{1}} 之前更改数据

*ngFor

Answer 4

最好在订阅中对ngOnInit中的每个项目执行此类函数调用，然后在转换后使用* ngFor显示它们。

并改变：

<div *ngFor="let item in items">

到

<div *ngFor="let item of items">

Answer 5

模板不是这样做的地方，您希望在组件代码中获取数据。听起来你想要使用像flatMap这样的observable，它允许你为源observable中的每个项返回另一个observable。这可能是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}

Answer 6

你可以使用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);
    }
}

Answer 7

不确定这是否是您要的内容，但是您可以将该项与事件变量一起传递给函数，如下所示：

<div *ngFor="let item in items">
  <span (click)="functionCall($event, item)"> <span>
</div>

然后像这样在您的班级中抓取该项目：

functionCall(event, item): void {
  console.log('item clicked:", item)
}

Answer 8

在component.html的span标签之间写另一个“ ngFor”

 <div *ngFor="let item in items">  
    <span *ngFor="let new of filterItems(item)"> {{new.anyAttribute}} </span>
 </div>

在component.ts中如果要过滤项目

filterItems(item) {
  let filterArray:any=[];
  return filterArray.filter(x => x.anyAttribute == item.anyAttribute);
}

如果要在项目中返回数组

filterItems(item){
   return item.Array //Array is an array in item
}

Answer 9

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;

    }
}

在angular2

9 个答案: