时间戳

首页 > 解决方案 > 为什么“重复组件”中的回调函数总是指向最后一个以角度重复的组件？

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

问题描述

我有一个重复组件五次的角度应用程序（例如）

<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，为什么我总是在点击比如说第一个组件时收到 this.somecount 为 5。我希望每个组件单击分别记录 1、2、3、4、5。

为什么会发生这种情况，任何解决方案都受到高度赞赏。非常感谢。

标签： javascriptangulartypescript

解决方案

对于您要重复的组件，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>

那么将分别为 0、1、2、3、4。如果您需要获得 1、2、3、4、5 作为输出someCount，您可能需要为 加 1 。someCount

推荐阅读