html - 如何使用 css 中的媒体打印在单独的页面中显示迭代的组件

Question

因为我使用的是 Angular，所以我有一个迭代组件/div。我还想在单独的债券纸中打印迭代的 div。但是当我尝试打印它时，它只显示第一页

这是我的 HTML

<div class="print-template">
    <div class="print-actions">
        <button class="ui default button" (click)="print()">Print</button>
        <button class="ui default button" (click)="togglePrintPaper()">Cancel</button>
    </div>
    <div class="paper">
        <ng-template ngFor let-staff [ngForOf]="divideStaffs(tempoArray, 20)">
            <app-print-workrec [data]="staff"></app-print-workrec>
            <app-print-workrec [data]="staff"></app-print-workrec>
        </ng-template>
    </div>
</div>

如您所见app-print-workrec，它被调用了两次。由于它被调用两次，因此也应该有 2 张证券纸。但在我的 CSS 中，只有第 1 页显示打印功能何时运行。这是我的 CSS

@media print {
body  {
    margin: 0;
}

.print-actions {
    display: none !important;
}

.paper {
    margin-left: -30px;
    margin-top: -50px;
}

.print-template {
    overflow-y: visible !important;
}

.paper {
    overflow: visible !important;
}
}

这是打印输出的图像：（应该有 2 页）

你如何解决这个问题？