带有Chartjs和表的Angular分页符

Question

我有这个html，其中app-sales-by-category-total是使用chartjs的组件。由于它处于for循环中，因此具有多个图表。

<div class="sales-cat-total">
  <h2>Sales By Category Total</h2>
  <div class="app-wrapper">
    <ng-container *ngFor="let division of categoryTotalData.divisions">
        <div class="category-tag">
          <div class="cat-item division" [ngStyle]="setBgColor(division.name)">
              <app-sales-by-category-total [month]="categoryTotalData.months" [division]="division"></app-sales-by-category-total>
          </div>
        </div>          
    </ng-container>
  </div>
</div>

分页符不起作用。这是我的CSS

.app-wrapper,
.sales-cat-total {
    page-break-after: always; 
    page-break-inside: avoid; 
    -webkit-region-break-inside: avoid;
    break-inside: avoid-page;
}

这是输出

即使在表中，分页符似乎也无法与此CSS一起使用：

table {
    page-break-inside: auto;
}

tr {
    page-break-inside: avoid;
}

Answer 1

嘿，您可以添加br标签

Answer 2

这是由于ViewEncapsulation。为了改变孩子的看法，您需要使用ng-deep伪类