Angular mat card 不会包装 ngx-charts 元素

Question

我正在尝试将 ngx-charts 元素放入 Angular 中的 mat-cards 中。但是<mat-card>不会封装图形。我发现了完全相同的问题 here，但该解决方案似乎对我不起作用。

我的 html 看起来像这样：

<mat-card>
    <mat-card-header>
        <mat-card-title>Starting fifteen</mat-card-title>
    </mat-card-header>

        <ngx-charts-pie-chart 
            [results]="starting"
            [legend]="false"
            [doughnut]="true"
            [view]="[100,100]"
            [labels]="false" >
        </ngx-charts-pie-chart>
                
   
</mat-card>

解决方案建议将 <ngx-charts-pie-chart> 包装在 <div class="spectre-pie-chart"> 中并对其应用以下样式：

:host {
  height: 100%;
  width: 100%;
}

.spectre-pie-chart {
  height: 100%;
  width: 100%;
  float: right;
}

我想我可能将 sccs 应用于错误的元素。该解决方案对如何应用它并不过分特别。谁能帮我把卡片完全环绕在图形上？

Answer 1

<div class="chart-container">
    <div class="spectre-pie-chart">
         <ngx-charts-pie-chart 
            [results]="starting"
            [legend]="false"
            [doughnut]="true"
            [view]="[100,100]"
            [labels]="false" >
        </ngx-charts-pie-chart>
    </div>
</div>

您应该将图表添加到父容器中，它应该可以解决您的问题

Angular mat card 不会包装 ngx-charts 元素

Angular mat card won't wrap ngx-charts element

css

angular-material

ngx-charts