2

在我的 Angular 项目中，我想到了一个仪表板，它向我展示了不同的流程圈。根据进度，我想更改线条的颜色。

这就是它现在的样子。 它看起来如何 这就是它应该的样子。 它应该是什么样子

不幸的是，我无法使用例如 [nzStrokeColor]="'red'" 更改颜色。

<div class="flex">
  <nz-card class="cards" *ngFor="let card of dashboarcard">
    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="card.titel" nzDescription="12.01.2019"> </nz-card-meta>
    <ng-template #avatarTemplate>
      <nz-progress [nzStrokeColor]="'red'" [nzWidth]="40" nzType="circle" [nzPercent]="card.percent"></nz-progress>
    </ng-template>
  </nz-card>
</div>

现在它总是蓝色的，不管我输入什么。
你知道我做错了什么吗？

多多问候，
金

4

1 回答 1

4

由于它仅在 7.0.0-rc.0中添加ng-zorro-antd@1.8.1，因此您无法更改stroke属性svg:path.ant-progress-circle-path

所以我更新了你的Stackblitz，它实际上按预期工作：

在此处输入图像描述

您可以看到它将stroke属性更改为red BUT

SVG 表示属性的优先级低于作者样式表或“样式”属性中指定的其他 CSS 样式规则。

这意味着stroke="red"它将被.ant-progress-circle-path类覆盖，这就是我们在上图中看到的。

因此，覆盖它的唯一一种方法是覆盖该类。

以下是如何实现它的几种方法：

1）添加覆盖到您的全局样式（stackblitz）

样式.css

path.ant-progress-circle-path { stroke:red }

注意：!important我们向类添加了元素，因此它具有比仅类更高的特异性，因此我们在这里不需要

2)::ng-deep在 `app.component.css ( stackblitz )中使用组合器

app.component.css

::ng-deep .ant-progress-circle-path { stroke:red;}

3) 将相同的规则添加到组件的app.component.css预设（stackblitz）encapsulationViewEncapsulation.None

app.component.ts

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {
于 2019-01-12T05:01:54.670 回答