Question

我有一个角度应用程序，它可以将一个分量重复五次（例如）

<ul>
  <li *ngFor="#someData of someDataThatGoesForFiveTimes; #ind=index">
   <componentThatIsRepeated [somecount]="ind">
   </componentThatIsRepeated>

这是重复的组成部分。

    @Component({
      selector: 'componentThatIsRepeated',
      template: `
        <componentThatOutputs  (outputEvent) = "callbackFn()">
        <p>Just some random template</p>
      `
    })

    export class ComponentThatIsRepeated {

        @Input() somecount: number;

        public callbackFn():void{

        console.log("For some reason, any click any of the 5 components, I receive this.somecount as 5")  //THIS IS THE PROBLEM
    }

这是发出事件/回调的组件。

@Component({
      selector: 'componentThatOutputs',
      template: `<button type="button"  (click) ="YouClickedMe()" >Click Me!</button>  `
    })

    export class ComponentThatOutputs {


        @Output()   outputEvent = new EventEmmmiter<any>();

            public YouClickedMe():void{
            this.outputEvent.emit("abc");



    }

但是，正如ComponentThatIsRepeated中的评论中所提到的，为什么我总是在点击“例如第一部分。我希望每个组件分别单击以记录1、2、3、4、5。

为什么会这样，因此高度赞赏任何解决方案。非常感谢。

Answer 1

对于组件，您要重复componentThatIsRepeated，必须像下面这样更改ngFor，

<ul>
   <li *ngFor="#someData of someDataThatGoesForFiveTimes; #ind=index">
       <componentThatIsRepeated [somecount]="ind">
       </componentThatIsRepeated>
   </li>
</ul>

<!-- For newer angular versions use below-->
<ul>
   <li *ngFor="let someData of someDataThatGoesForFiveTimes; let ind=index">
       <componentThatIsRepeated [somecount]="ind">
       </componentThatIsRepeated>
   </li>
</ul>

然后someCount将分别为0、1、2、3、4。如果需要获得1,2,3,4,5，则可能需要为someCount加1。作为输出。

为什么“重复组件”中的回调函数总是指向以角度重复的最后一个组件？

1 个答案: