在angular2调用函数里面ngFor

问题描述 投票:12回答:8

你好我使用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>
angular
8个回答
9
投票

您可以使用自定义的指令,呼吁每个迭代的方法:

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

7
投票

听起来不是很好,但是,最简单的方法:

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

5
投票

怎么样进来打字稿本身*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.
}

2
投票

更好地做一个认购ngOnInit每个项目,例如函数调用,然后他们应该与* ngFor改造后显示。

和更改:

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

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

1
投票

模板是不是要做到这一点,你想在组件代码数据的地方。听起来像是你想使用类似的观察到的,它可以让你返回另一个观察到的,在源可观察每个项目的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}

1
投票

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

0
投票

不知道这是你在问什么,但你可以在项目传递给函数像这样的事件变量一起:

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

然后抢项类是这样的:

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

-1
投票
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;

    }
}
© www.soinside.com 2019 - 2024. All rights reserved.