javascript - 我如何更改 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 类覆盖，这就是我们在上图中看到的。

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

---

这里有几种实现方式:

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

样式.css

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

注意:我们将元素添加到类中，因此它比类具有更高的特异性，因此我们在这里不需要 !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 for component ( stackblitz )

app.component.ts

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