angular - 使用 Chartjs 和表格在 Angular 中分页

Question

我有这个 html whereapp-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 标签

    <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>   
            </br>       
        </ng-container>

Answer 2

这是由于ViewEncapsulation。为了改变孩子的观点，你需要使用ng-deep伪类

app-sales-by-category-total ::ng-deep {
  table {
    // Style goes here
  }
}