Angular TypeScript 当 for 循环完成回调

Question

由于 javascript async 正在运行，我的打印代码在没有创建 div 的情况下运行。 我想在 for 循环完成后运行我的打印代码，但我找不到解决方案。

这是我的方法：

AllShipmentPrint() {
    for (let index = 0; index < this.ShipmentList.SuppOrderLines.length; index++) {
      const element = this.ShipmentList.SuppOrderLines[index];
      for (let index2 = 0; index2 < (element.Amount / element.SetCount); index2++) {
        this.BarcodePrintList.push({ Barcode: element.Barcode, FirmModelCode: element.FirmModelCode, ColorCode: element.Color.ColorCode, ColorName: element.Color.ColorName, SuppModelCode: element.SuppModelCode, SizeList: element.SizeList, SetCount: element.SetCount });
      }
    }
    const printContent = document.getElementById("componentID");
    const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
    WindowPrt.document.write(printContent.innerHTML);
    WindowPrt.document.close();
    WindowPrt.focus();
    WindowPrt.print();
  }

这是我的打印代码：

  const printContent = document.getElementById("componentID");
    const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
    WindowPrt.document.write(printContent.innerHTML);
    WindowPrt.document.close();
    WindowPrt.focus();
    WindowPrt.print();

这是我的 html 代码：

<div id="componentID">
    <div *ngFor="let item of BarcodePrintList" style="margin-top: 10px;">
        <div style="display: -webkit-inline-box;">
            <div>
                <span style="font-size: 9px;">Model : {{item.FirmModelCode}}_{{item.ColorCode}}
                    {{item.ColorName}}</span>
                <div style="display: flex;">
                    <table style="font-size: 8px;text-align: center;">
                        <thead>
                            <tr>
                                <th *ngFor="let size of item.SizeList">{{size.PropValName}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td *ngFor="let size of item.SizeList">{{size.Amount}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <span style="font-size: 12px;margin-top: 11px;margin-left: 11px;">SET : {{item.SetCount}}</span>
                </div>

            </div>

        </div>
        <div style="float: right;">
            <img width="80px" height="40px" src="http://scm.vipstendo.com/assets/images/logo.png" alt="">
        </div>
        <div style="text-align: center;">
            <ngx-barcode [bc-value]="item.Barcode" [bc-font-size]="10" [bc-width]="1.5" [bc-height]="30"
                [bc-display-value]="true"></ngx-barcode>
        </div>
        <div>
            <span style="font-size: 10px;">{{item.SuppModelCode}}</span>
        </div>
    </div>
</div>

Answer 1

最简单的方法是将其余部分包装在一个空的setTimeout以便在重新渲染后执行：

setTimeout(() => {
  const printContent = document.getElementById("componentID");
    const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
    WindowPrt.document.write(printContent.innerHTML);
    WindowPrt.document.close();
    WindowPrt.focus();
    WindowPrt.print();
})

还有其他可能更好的方法，但它们需要更深入地了解您的应用