角度上有两个级别的圆形进度条答案

【问题标题】：Circular progress bar with two levels on angular角度上有两个级别的圆形进度条
【发布时间】：2020-10-22 08:57:38
【问题描述】：

Circular progress bar in angular 2 - 我想用两个值修改填充。但是当我尝试如下更改代码时：

我的 TS 文件

    @Input() value: number = 0;
    @Input() value1: number = 0;

我的 HTML

    <div class="c100" [ngClass]="['p' + value + value1, isBig ? 'big' : 'small', color]">
          <span>{{value}}%</span>
          <div class="slice">
              <div class="bar"></div>
              <div class="fill"></div>
              <div class="fill1"></div>
          </div>
      </div>

报错如下：

ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '[value,' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': '[value,' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.setAttribute (vendor.js:74732)
    at BaseAnimationRenderer.setAttribute (vendor.js:73720)
    at setUpAttributes (vendor.js:25109)
    at ɵɵelementStart (vendor.js:35714)
    at Module.ɵɵelement (vendor.js:35784)
    at ReqappdashboardComponent_Template (main.js:5618)
    at executeTemplate (vendor.js:29134)
    at renderView (vendor.js:28943)
    at renderComponent (vendor.js:30204)
    at renderChildComponents (vendor.js:28802)
    at resolvePromise (polyfills.js:1020)
    at resolvePromise (polyfills.js:972)

【问题讨论】：

标签： angular

【解决方案1】：

首先检查value 和value1 是有效的数字或字符串

如果你想实现对value + value1的操作，你应该先将它们分组

<div class="c100" [ngClass]="['p' + (value + value1), isBig ? 'big' : 'small', color]">
    <span>{{value}}%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
        <div class="fill1"></div>
    </div>
</div>

工作示例 https://stackblitz.com/edit/angular-ivy-mk5v4g?file=src/app/app.component.ts

【讨论】：