ANGULAR 2/4:NgFor中每一行的调用函数 [英] ANGULAR 2/4 : call function for each row in 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>

现在，对于我的ngFor中的每个数据，我想调用一个函数( 发生myFunction(beat.id))时，此函数将返回一个数字.

我想检索返回函数的编号，以便在其中显示 我的ngFor ...的每个数据...

我尝试创建带有输出事件的指令调用"，并且 然后在我的ngAfterContentInit()中，发出了我的输出，但没有任何输出 发生了，加载数据时不会触发.

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

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

解决方案

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>

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

i'm learning AngularJS, and i need some help.

I have a template like this

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

So if anybody have a solution.. thank's !

解决方案

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>

The pipe variant:

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

and use it like

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

(the pipe needs to be registered in declarations of the module (or in an imported module)

这篇关于ANGULAR 2/4:NgFor中每一行的调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！