Javascript 角度2/4：NgFor中每行的调用函数

我正在学习AngularJS，我需要一些帮助

我有一个这样的模板

    <div *ngFor="let beat of data" (invoke)="myFunction(beat.id)" class="item">
      <div class="item-column-1 inline">
        <div class="item-column-1-container">
          <img class="item-img1" src="/CMP.jpg">
          <p>{{beat.uploader}}</p>
        </div>
      </div>
      <div class="item-column-2 inline">
        <span class="item-title">{{beat.title}}</span>
        <p class="item-score">245 </p>
        <span>#TRAPCHILL</span>
        <p>#TYGA #DRAKE #YOUNG THUG #MIGOS</p>
        <P>Posted: 2 days ago</P>
          <!-- <input (click)="rate(beat.id,1)" alt="beat.id" type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="{{beat.id}}">1</label>
          <input (click)="rate(beat.id,2)" alt="beat.id" type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="{{beat.id}}">2</label>
          <input (click)="rate(beat.id,3)" alt="beat.id" type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="{{beat.id}}">3</label> -->
          <div  (click)="rate(beat.id,1)" class="flamme"></div>
          <div  (click)="rate(beat.id,2)" class="flamme"></div>
          <div  (click)="rate(beat.id,3)" class="flamme"></div>

        <span></span>
      </div>
      <button (click)="play(beat.path)" type="button" name="button">play</button>
      <button (click)="sendMsg()">Send</button>


      <div class="item-column-3 inline">
          <img class="album-cover" src="{{beat.path_img}}" alt="">
      </div>

    </div>

{{beat.uploader}

{{beat.title}
245
#特拉普希尔
#泰加#德雷克#年轻暴徒#米戈斯

 发布日期：2天前
玩
发送

现在，对于ngFor中的每个数据，我想调用一个函数（在 Occurrence myFunction（beat.id）），此函数将返回一个数字

我想检索返回函数的编号，以便在 我的ngFor的每个数据

我试图创建一个指令“invoke”，带有一个输出事件，然后 然后在ngAfterContentInit（）中，我发出了输出，但什么也没有发出 发生时，加载数据时不会触发

@指令（{selector:'[invoke]}）
导出类MainComponent实现OnInit{
检索对象：任何；
src：字符串；
资料：有；
当前：任何；
评级：任何；
计数率：任何；
认购：认购；
持续时间：任何；
@Output（）调用：EventEmitter=neweventemitter（）；
---
ngAfterContentInit（）{
this.invoke.emit（null）；
}
myFunction（节拍id）{
警报（“触发”）；
}

---

因此，如果任何人都有解决方案..thank's！

在类上获取一个数组作为属性。每次调用函数时，将此数组的相应项（例如i）设置为值。并且在模板中引用同一数组的i项

this.data = dataFromSomewhere();
this.dataOpt = this.data.map((d) => this.myFunction(d.id));

像这样使用它

<div *ngFor="let beat of data; let i=index"  class="item">
  <div>{{data | myPipe}}</div>

{{data | myPipe}}

---

（管道需要在模块（或导入的模块）的声明中注册）

这是一个非常糟糕的主意。请详细说明您需要它做什么？每次Angle runs change detection时，都会调用此函数。这将显著降低页面的性能。“我想检索返回函数的编号，以便在我的ngFor的每个数据中显示它。。。为此，请创建一个管道，或预先计算代码中数组的每个项的值，并将其添加到数组中，或创建一个新数组，其中的值与它们关联的原始数组的索引相匹配。然后，您可以使用

…；让i=索引“
*ngFor
的

要访问具有相同数组索引的第二个数组的值，

*ngFor

正在迭代。@Brayan您不是在学习AngularJS（也称为Angular1），而是在学习Angular（称为Angular2/4）我知道，这很混乱。Brayan233，你为什么不在构造函数中循环并在那里进行计算。你可以在每次迭代时将计算值附加到对象上。然后它将在对象本身的ngFor中可用。我的需要是：我用ngFor显示一些数据，对于每个数据，我不想调用fu使用param（ngFor的somevalue）进行nction，然后为我的每个数据显示函数的返回值。@GünterZöchbauerBetter我删除的答案：）这对我来说有点中文，我会尝试在我的代码中实现您的解决方案，我会随时通知您，谢谢！：）您好@Günter Zöchbauer，谢谢您的回答，我已经实现了您的第一个解决方案，它工作得很好，.map（）是非常强大的。但是我有一个小问题，我想要返回的值在这样的子函数中：this.beatService.getRating（beat_id）.subscribe（response=>{this.countRate=response.results[0].total_rate}）；当我想返回这个.countRate时，它在subcribe函数之外是未定义的…我该怎么办？这是正常行为，也是人们从可观察对象开始经常问的问题。只需将所有vode移到

订阅（…）

。您传递给

订阅（…）的是什么

是一个函数，当值可用时，可观察对象将调用该函数。这通常比执行

subscribe（）

之后的代码要晚得多。哦，当然，好的，我明白了。现在一切都正常了，所以我有：this.dataOpt=this.data.map（（d）=>this.getRating（d.id））；getRating（beat_id）{this.beatService.getRating（beat_id）.subscribe（response=>{this.setCountRating（response）}}setCountRating（data）{let total_rate=data.results[0].total_rate；this.countRate.push（total_rate）；}你认为这是一个好的做法还是有更好的做法？再次感谢。

<div *ngFor="let beat of data; let i=index"  class="item">
  <div>{{dataOpt[i]}}</div>

@Pipe({selector: myFunc})
class MyPipy implements PipeTransform {
  transform(val:string) {
    return // do the same calculation here that you would do in `myFunction`;
  }
}

<div *ngFor="let beat of data; let i=index"  class="item">
  <div>{{data | myPipe}}</div>