如何在ng-zorro中更改进度圆圈的笔触颜色？

Question

在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>

无论我输入什么，现在总是蓝色。
你知道我在做什么错吗？

许多问候，
金

Answer 1

使用ng-zorro-antd@1.8.1不能更改stroke的{​​{1}}属性，因为该属性was added仅在7.0.0-rc.0中存在

所以我更新了您的Stackblitz，它实际上可以按预期运行：

您可以看到它将svg:path.ant-progress-circle-path属性更改为stroke 但

  

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

这意味着red类将覆盖stroke="red"，这就是我们在上图中看到的内容。

所以重写它的唯一方法是重写该类。

---

这里有几种方法可以实现它：

1）为您的全局样式添加替代（stackblitz）

styles.css

.ant-progress-circle-path

注意：我们在类中添加了元素，因此它比类具有更高的特异性，因此我们在这里不需要path.ant-progress-circle-path { stroke:red }

2）在app.component.css（stackblitz）中使用!important组合器

app.component.css

::ng-deep

3）向::ng-deep .ant-progress-circle-path { stroke:red;} 中添加相同的规则，以将组件（stackblitz）的app.component.css设置为encapsulation

app.component.ts

ViewEncapsulation.None