Разрыв страницы не работает с ngFor в Angular 13
Я немного поискал решение, но разрывы страниц в компоненте Angular 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;"> </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);
Данные отображаются нормально на экране печати, но разрыв страницы в шаблоне не вставляет разрыв страницы - шаблон мешает? Я также пробовал «перерыв-после: страница», «перерыв-после: авто» и даже «разрыв-перед: страница», «разрыв-перед: авто» и «разрыв-перед: всегда». Я также попытался использовать мультимедийные запросы CSS, которые я видел в нескольких поисках, и добавить «! Важно» во встроенный CSS. Ничего еще не сработало. У кого-нибудь есть идеи? Благодарю вас!
Ответы 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); в 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);
}
Извините, я должен был быть яснее, что отличается в моем примере. Я улучшу свой комментарий. Если вы применили правильный синтаксис CSS, переместите #testTemplate от <ng-template> к <div>, например. ng-template не отображается в шаблоне, поэтому вам не на что ссылаться. Тогда звоните this.printer.printAngular(this.testTemplate); в ngAfterViewInit(). <div> с #testTemplate становится доступным в начале этого цикла.
В итоге это приняло совсем другой оборот — мы использовали ngx-printer и переключились на ngx-print, и с этой библиотекой все работало нормально, включая разрывы строк. Так что на самом деле у меня не было возможности попробовать решение, которое вы опубликовали, но я все равно отмечу его как лучший ответ. Спасибо за ваш вклад.
Это определенно работает, но я также пытаюсь использовать шаблон Angular и ngx-printer, и разрывы страниц не отображаются с этой конфигурацией. Если я не добьюсь там никакого прогресса, возможно, мне нужно пересмотреть подход, но спасибо за ваш ответ.