在angular2中的ngFor中调用函数

您好，我正在使用Angular2，希望获取服务器，并获取每个ID的值

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

这里调用一个函数，该函数使用“item”执行某些操作并返回新的内容

最好在订阅中对ngOnInit中的每个项目进行这样的函数调用，然后在转换后用*ngFor显示它们

和变化：

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

到

---

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

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

}

---

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

<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>

---

在

*ngFor

进入Typescript本身之前，如何更改数据

this.items.forEach((item,index)=>{
  item=this.func(item,index);
})

func(item,index):string{
    return item+ String(index); //do whatever you wish to do.
}

---

模板不是这样做的地方，您希望在组件代码中获取数据。听起来您想使用类似于可观察对象的

flatMap

，它允许您为源可观察对象中的每个项目返回另一个可观察对象。这可能是http api调用的返回或其他任何内容：

varids=[“a”、“d”、“c”]；
var lookupValues={“a”：123，“b”：234，“c”：345，“d”：456}；
//给一个身份证
函数fakeApiCall（id）{
//给定一个id，返回一个带有一个条目的可观察对象：一个包含
//具有该id值的“id”属性和具有
//该id的lookupValues中的值
返回Rx.Observable.just（{id:id，lookup:lookupValues[id]}）；
}
var o1=Rx.可观察到的来自（ids）；/'a、 d，c
var o2=o1.flatMap（x=>{
//这里我们从o1中获取每个值，因此我们进行api调用并返回
//一个可观察到的从每一个将有价值的
//与所有其他待发送至o2的可观察组合
返回伪造文件（x）；
});
o2.订阅（x=>{
document.write（JSON.stringify（x）+“
”）；
});
//结果:
//{“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);
    }
}

@组件({
选择器：'英雄'，
模板：`
名称
{{hero.name}
`})
出口级英雄{
英雄=英雄；
轨迹英雄（索引，英雄）{
console.log（英雄）；
}
}

组件({
选择器：'英雄'，
模板：`
名称
{{hero.name}
`
})
出口级英雄{
英雄=英雄；
轨迹英雄（索引，英雄）{
console.log（英雄）；
返回英雄？英雄id：未定义；
}
}

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

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

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

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

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

如果要在项中返回数组

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

---

听起来是个奇怪的要求。您试图实现什么？例如@Günter Zöchbauer，以某种复杂的方式生成项目属性的显示名称。这一点也不奇怪。在代码中执行，并将其分配给每个

项目

，然后在

*ngFor

中使用它。不鼓励从模板绑定中调用此类函数。@GünterZöchbauer有没有机会分享一个正确方法的示例？这根本不是一个奇怪的要求操作项上的数据创建显然不是angular团队实现的任务。使用插值调用函数不是一种可靠的方法，由于

ngOnChanges

，它将被多次调用@xe4me@BhushanGadekar，我知道这不是一个好方法，这就是我说的听起来不好的原因，但这是他想要的，他可以轻松创建一个变量，比如fire_，一旦调用一次，就将其设置为true，不管怎样，这不是一个好方法。你会按照你上面建议的方式提供一些代码吗？这个代码是否需要更新才能与Angular 6兼容？我不能让它按原样工作。该函数从未被调用。我不得不重新命名一些东西，使TSLint也允许我的应用程序进行编译

OnCreate

/

OnCreate

需要重命名为

NgForOnCreateDirective

/

NgForOnCreateDirective

，选择器必须以app作为前缀，因此我将其更改为

appNgForOnCreate

@Routhinator，此示例是否适用于Angular 5？原因被调用的函数不工作。PS：我将onCreate by Callfn指令和选择器更改为“[appCallFn]”。我尝试在subscribe函数中执行此操作，但找不到访问我试图在forEach中创建的.newArray的方法。你能用一个例子来更新这个吗？

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}

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

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;

    }
}

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

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

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

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

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