分页在角13中不与ngFor一起工作

Question

我已经搜索了一些解决方案，但是角13组件中的分页符不会破坏页面。

我使用的是一个简单的ng模板(为可读性而删除的额外字段)：

<ng-template #testTemplate let-allTheData>
  <div *ngFor="let dataItem of allTheData" >
    <div><b>ID:</b> {{ dataItem.id }}</div>
    <div style="break-after:always;">&nbsp;</div>  <-- non-working page break
  </div>

模板设置为ViewChild，如下所示：

@ViewChild('testTemplate ') testTemplate !: TemplateRef<any>;

数据通过循环传递和处理。

 data.forEach(x => {
      theThing = {};
      theThing.id = arrtId;
      this.theData.push(theThing);
    });

然后使用这一行调用print对话框(使用)：

this.printer.printAngular(this.testTemplate);

数据在打印屏幕上显示得很好，但是模板中的分页没有插入分页符--模板是否会干扰？我还试过“突破后:页”，“突破后:自动”，甚至“突破-前:页”，“突破-前:自动”和“突破-之前:永远”。我还尝试使用我在一些搜索中看到的CSS媒体查询，并将“！重要”添加到内联CSS中。什么也没有奏效。有人有什么想法吗？谢谢!

Answer 1

我猜css语法有点偏离page-break-after: always。

  <div style="page-break-after: always" *ngFor="let dataItem of allTheData" >
    <div><b>ID:</b> {{ dataItem.id }}</div>
  </div>

  <button (click)="onPrint()">Print</button>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  allTheData = [{ id: 1 }, { id: 2 }, { id: 3 }];
  constructor() {}

  onPrint() {
    window.print();
  }
}

工作示例：https://stackblitz.com/edit/angular-ivy-9wgfdt?file=src%2Fapp%2Fapp.component.ts

对不起，我应该更清楚我的例子有什么不同。我会改进我的评论。如果您已经应用了正确的css语法，那么将#testTemplate从<ng-template>移到<div>，例如。ng-template不会在模板中呈现，因此您没有什么可引用的。然后调用this.printer.printAngular(this.testTemplate); in ngAfterViewInit()。在这个周期中，<div>和#testTemplate可以最早使用。

<ng-template let-allTheData>
  <div #testTemplate 
       style="page-break-after: always"
       *ngFor="let dataItem of allTheData">
    <div><b>ID:</b> {{ dataItem.id }}</div>
  </div>

ngAfterViewInit() {
   this.printer.printAngular(this.testTemplate);
}