javascript - ANGULAR 24 : call function for each row in NgFor - Stack Overflow

admin管理员组

文章数量:1023187

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 !

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 !

• javascript
• angular
• rxjs
• observable

Share Improve this question Follow edited Aug 25, 2017 at 12:27 Kyle Krzeski 6,52766 gold badges4343 silver badges5656 bronze badges asked Aug 25, 2017 at 12:00 Brayan233Brayan233 1311 silver badge66 bronze badges 8

• 1 That's a very bad idea. Can you please elaborate what you need this for? Every time Angular runs change detection, this function will be called. This will drag down performance of your page dramatically. – Günter Zöchbauer Commented Aug 25, 2017 at 12:02
• "i wanna retrieve the number of the return function, for display it in each data of my ngFor..." for this either create a pipe, or pre-calculate the value for each item of the array in code and add it to the array or create a new array where the values match the index of the original array they are associated with. You can then use the ...;let i=index" of *ngFor to access the value of the 2nd array with the same index of the array *ngFor is iterating over. – Günter Zöchbauer Commented Aug 25, 2017 at 12:04
• @Brayan you're not learning AngularJS (aka Angular 1), you're learning Angular (aka Angular 2/4). It's confusing, I know. – Jeremy Thille Commented Aug 25, 2017 at 12:10
• Brayan233, why don't you loop through the items in the constructor and do the calculations there. You can append the value of the calculation to the object at each iteration. Then it will bee available in the ngFor in the object itself. – enf0rcer Commented Aug 25, 2017 at 12:12
• My need is : I have some data display with NgFor, for each data, i wan't to call a function with param ( somevalue of the ngFor), and then display the return value of the function for each my data. @GünterZöchbauer – Brayan233 Commented Aug 25, 2017 at 12:14

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 4

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)

Get an array as property on your class. Each time your function is called, set the corresponding item (say i) of this array to the value. And in the template reference the i item of that same array.

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 !

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 !

• javascript
• angular
• rxjs
• observable

Share Improve this question Follow edited Aug 25, 2017 at 12:27 Kyle Krzeski 6,52766 gold badges4343 silver badges5656 bronze badges asked Aug 25, 2017 at 12:00 Brayan233Brayan233 1311 silver badge66 bronze badges 8

• 1 That's a very bad idea. Can you please elaborate what you need this for? Every time Angular runs change detection, this function will be called. This will drag down performance of your page dramatically. – Günter Zöchbauer Commented Aug 25, 2017 at 12:02
• "i wanna retrieve the number of the return function, for display it in each data of my ngFor..." for this either create a pipe, or pre-calculate the value for each item of the array in code and add it to the array or create a new array where the values match the index of the original array they are associated with. You can then use the ...;let i=index" of *ngFor to access the value of the 2nd array with the same index of the array *ngFor is iterating over. – Günter Zöchbauer Commented Aug 25, 2017 at 12:04
• @Brayan you're not learning AngularJS (aka Angular 1), you're learning Angular (aka Angular 2/4). It's confusing, I know. – Jeremy Thille Commented Aug 25, 2017 at 12:10
• Brayan233, why don't you loop through the items in the constructor and do the calculations there. You can append the value of the calculation to the object at each iteration. Then it will bee available in the ngFor in the object itself. – enf0rcer Commented Aug 25, 2017 at 12:12
• My need is : I have some data display with NgFor, for each data, i wan't to call a function with param ( somevalue of the ngFor), and then display the return value of the function for each my data. @GünterZöchbauer – Brayan233 Commented Aug 25, 2017 at 12:14

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 4

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)

Get an array as property on your class. Each time your function is called, set the corresponding item (say i) of this array to the value. And in the template reference the i item of that same array.

本文标签： javascriptANGULAR 24call function for each row in NgForStack Overflow