Angular 13 中的分页符无法与 ngFor 一起使用

Question

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

我正在使用一个简单的 ng-template （为了可读性而删除了额外的字段）：

<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);
    });

并且使用此行调用打印对话框（使用 ngx-print )：

this.printer.printAngular(this.testTemplate);

数据在打印屏幕上显示正常，但模板中的分页符没有插入分页符 - 模板是否干扰？我还尝试过“break-after：page”、“break-after：auto”甚至“break-before：page”、“break-before：auto”和“break-before：always”。我还尝试使用我在一些搜索中看到的 CSS 媒体查询，并将“!Important”添加到内联 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 不会在模板中渲染，因此您没有任何可引用的内容。然后在ngAfterViewInit()中调用this.printer.printAngular(this.testTemplate);。带有 #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);
}