Question

我这里有个突如其来的飞车-https://stackblitz.com/edit/svg-donuts-fhnnmo?file=src%2Fapp%2Fdonuts.component.ts

我用svg stroke-dasharray创建了三个甜甜圈图

每个细分的位置应从上一个图表细分开始

因此，第一个图表细分为60％，然后第二个图表细分应从60％开始。

我可以使用以下方法设置线段位置：

周长-所有先前片段的总长度+第一片段的偏移量=当前片段的偏移量

在ngFor循环中，我正在调用updatePercent函数以获取前一段的长度和起始位置。

这适用于第一和最后一个课程，但不适用于中间课程。

在控制台中，我收到错误ExpressionChangedAfterItHasBeenCheckedError，并且控制台日志似乎比预期的要继续运行。

ExpressionChangedAfterItHasBeenCheckedError是什么意思

import { Component, Input } from '@angular/core';

@Component({
  selector: 'donuts',
  templateUrl: './donuts.template.html'
})


export class DonutsComponent  {
  @Input() donutData: any;

  public startOffset = 25;
  public strokeDashOffset;
  public firstOffset;
  public previousValues = [];

  updatePercent(i:number, donut:any){
    if(donut){
      if(i === 0){
        this.firstOffset = donut.percent
        this.previousValues.push(this.startOffset)
        this.previousValues.push(this.firstOffset)
        this.strokeDashOffset = this.startOffset
      }else{
        this.previousValues.push(donut.percent);
        console.log(this.previousValues.reduce((a, b) => a + b, 0))
        this.strokeDashOffset = 100-this.previousValues.reduce((a, b) => a + b, 0);
      }
    }
  }
}

Answer 1

在此文件 donuts.template.html

<div>
  <ul>
    <li *ngFor="let donut of donutData; let i = index;">
      {{updatePercent(i, donut)}}  
      <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">

{{updatePercent（i，donut）}} 行循环导致了此问题。因为您要在角度完成其一个周期的变化检测之前更改模型。

Answer 2

对.html中的函数的错误调用

您可以像这样更改代码

///在您的组件中，使用@Input（）设置为甜甜圈赋值

  _donutData:any  //<--create a new variable
  @Input() 
  set donutData(value)
  {
    this._donutData=value;
    //with each value, you calculate the percent
    this._donutData.forEach((x,i)=>{
       this.updatePercent(i, x)

    })
  }

//您donnut.html

<div>
  <ul>
    <!--we iterate over _donutData (the new variable added)-->
    <li *ngFor="let donut of _donutData; let i = index;">
      <!--see that you remove the line {{updatePercent(i, donut)}}  -->
      <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
        <circle class="donut-hole" 
         ...

角度-ExpressionChangedAfterItHasBeenCheckedError

2 个答案: