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> 移动到 <div>。 ng-template 不会在模板中呈现，因此您没有任何参考。然后在ngAfterViewInit()中调用this.printer.printAngular(this.testTemplate);。 <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);
}

Angular 13 中的分页符不适用于 ngFor

Page Break not working with ngFor in Angular 13

printing

angular-template

ngx-bootstrap

angular