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>

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

我想检索返回功能的编号，以便显示它   我的ngFor ...
的每个数据
我试图创建一个带有输出事件的指令“invoke”，和   然后在我的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');
}

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

Answer 1

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

并像

一样使用它

var today = new Date();
var first = new Date(today.getFullYear(), 0, 1);
var theDay = Math.round(((today - first) / 1000 / 60 / 60 / 24) + .5, 0);
alert("Today is the " + theDay + (theDay == 1 ? "st" : (theDay == 2 ? "nd" : (theDay == 3 ? "rd" : "th"))) + " day of the year");

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

Answer 2

在您的课程中获取一个数组作为属性。每次调用函数时，将该数组的相应项（比如i）设置为该值。并在模板中引用相同数组的i项。

ANGULAR 2/4：NgFor中每一行的调用函数

2 个答案: