ngAfterViewInit 仅单击数组中的第一个按钮。激活其他后续数组元素引用的结果

Posted 2023-03-13

【中文标题】ngAfterViewInit 仅单击数组中的第一个按钮。激活其他后续数组元素引用的结果

【英文标题】：ngAfterViewInit clicks only first button in array. Activates result of other subsequent array ElementRefs

【发布时间】：2019-12-19 14:29:08

【问题描述】：

从一个自定义组件中，我有一个 ElementRef 数组来显示附加到 *ngFor 循环中接收到的数据的图像。一旦点击事件发生，所有图片都显示在一张数据卡中，而另一张 *ngFor 数据卡则不显示任何图片。

我从父组件开始，然后是 customComponent，但结果相同。控制台向我显示每个 ElementRef 正确地有一个不同的图像，但只有第一个将所有图像捆绑在一起，而其余的卡是纯数据的。没有图片。

  @ViewChildren('clickBrag') bragwphoto: QueryList<ElementRef>;

ngAfterViewInit() 
      this.bragwphoto.changes.subscribe(() => 
        let array = this.bragwphoto.toArray();
        for (const a of array )
        
          a.nativeElement.click();
        
      );
    

<bragwphoto *ngFor="let brag of brags; let index = index"

                      [name]="brag.name"
                      [date]="brag.updatedAt"
                      [post]="brag.post"
                      [fileID]="brag.fileID"
                      [length]="brag.comments.length"
                      >

                      <div *ngIf="brag.fileID" #clickBrag (click)="getBinary(brag.bragPhoto.data.data)"> </div>

                </bragwphoto>

预期：

<customComponent>image, post,date...</customComponent>
<customComponent>image, post,date...</customComponent>
<customComponent>image, post,date...</customComponent>
etc...

Actual output is:

<customComponent>image,image,image, post,date...</customComponent>
<customComponent>post,date...</customComponent>
<customComponent>post,date...</customComponent>
etc...

【参考方案1】：

已排序。 问题：getElementsById 将关注与您的查询匹配的第一个元素，并在那里转储所有照片。 因此，请重置第一个元素的 id，然后 appendChild 您的第一个图像。 立即，对 getElementsById 的下一次调用将带来一个新元素，它会经历相同的过程，循环直到您的数组耗尽。 瞧，所有图片都将放在适当的位置。

enter code here


ngAfterViewInit() 
      this.bragwphoto.changes.subscribe(() => 
        setTimeout(async () => 
       let bragPhotoButtons = this.clicker.toArray();
            for(var i = 0; i<bragPhotoButtons.length; i++) 
              bragPhotoButtons[i].nativeElement.click();
          
        )
      )
    

async getBinary(base64String: string, elem: any) 

      let photoSlot = 0;
        let img = new Image();
          img.src = "data:image/jpeg;base64," + this.arrayBuffer2Base64(base64String);
            const ringaID = await elem.ringaID;

            const src = document.getElementById("bragPhotoDiv");
            // let src = document.getElementById("bragPhotoDiv").setAttribute("id", photoSlot + "modified" + ringaID);

          src.id = photoSlot + "modified" + ringaID;
        photoSlot++;

      src.appendChild(img);