javascript - Angular 2/4 : call function for each row in NgFor

Question

我正在学习 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>

Now, for each data in my ngFor, i want to call a function ( in occurence myFunction(beat.id)), this function will return a number.

i wanna retrieve the number of the return function, for display it in each data of my ngFor...

I've tried to create a directive "invoke", with an output event, and then in my ngAfterContentInit(), i emitted my output, but nothing happened, it's not trigged when my data is loaded.

@Directive({ selector: '[invoke]'})

export class MainComponent implements OnInit {
retrievedObject : any;
src : string;
data : any;
current:any;
rating : any;
countRate : any;
subscription: Subscription;

duration:any;
@Output() invoke:EventEmitter<boolean> = new EventEmitter();
---
ngAfterContentInit() {
  this.invoke.emit(null);
}

myFunction(beat_id){

alert('trigged');
}

所以如果有人有解决方案..谢谢!

Answer 1

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

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