我如何更改 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 您无法更改 svg:path.ant-progress-circle-path 的 stroke 属性，因为它 was added 仅在 7.0.0-rc.0

中

所以我更新了你的 Stackblitz 并且它确实按预期工作：

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

SVG presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

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

因此覆盖它的唯一方法就是覆盖 class。

这里有几种实现方法：

1) 为您的全局样式添加覆盖 (stackblitz)

styles.css

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

注意： 我们在 class 中添加了元素，所以它比 class 具有更高的特异性，所以我们在这里不需要 !important

2) 在`app.component.css (stackblitz)

中使用 ::ng-deep 组合子

app.component.css

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

3) 将相同的规则添加到 app.component.css 预设 encapsulation 到 ViewEncapsulation.None 组件 (stackblitz)

app.component.ts

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {

我如何更改 ng-zorro 中进度圈的描边颜色？

How can i change the stroke color of the progress circle in ng-zorro?

javascript

angular

angular7

ng-zorro-antd

这里有几种实现方法：