Question

从一个自定义组件中，我有一个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...

Answer 1

排序。问题：getElementsById将专注于与您的查询匹配的第一个元素，并将所有照片转储在那里。因此，请重置该第一个元素的ID，然后重置您的第一个图像。立即，对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);
  }

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

1 个答案: