Javascript 从组件更改二维码的内容

我正在使用ngx-qrcode2在我的角度应用程序中生成QR码。在那里，我需要做的是附加一组二维码到PDF和下载文件

我在循环中更改QR in组件的内容。在我的DOM中，我看到循环运行时二维码发生了变化

fruits = ['mango', 'apple', 'orange']

async download() {

    let doc = new jsPDF();

    let imgDataArr = [];

    for (const f of this.fruits) {
      this.qrvalue = f;

      while (!document.querySelector(".qrcode img")) {
        await new Promise(r => setTimeout(r, 500));
        console.log("waiting for qr");
      }
      console.log("QR element is available");

      const qrcode = document.getElementById('qrcode');

      let imageData= this.getBase64Image(qrcode.firstChild.firstChild);

      imgDataArr.push(imageData)
    } 

    for (const data of imgDataArr ) {

      doc.addImage(data, "JPG", 10, 10);   
       doc.addPage();
    }

    doc.save('FirstPdf.pdf');
}

但是，我下载的最终PDF包含三个QR码，其中包含相同的数据

为什么呢？元素更改前是否有延迟？如何解决这个问题

请注意，我的实现主要基于