如何使用css中的media print在单独的页面中显示迭代的组件

Question

我有一个迭代组件/ div，因为我使用的是Angular。我还想在单独的bondpapers中打印迭代的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个bondpapers。但是在我的CSS中，只有第1页显示Print Functionality运行时。这是我的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;
}
}

这是Print的输出图像:(应该有2页）

  

你是如何解决这个问题的？