SVG, Angular - ошибка: ExpressionChangedAfterItHasBeenCheckedError

Question

Здесь у меня есть стек-блиц - https://stackblitz.com/edit/svg-donuts-3yfsou?file=src%2Fapp%2Fdonuts.template.html

У меня есть круговая диаграмма svg в угловом компоненте

Секции диаграммы должны быть расположены рядом друг с другом, но вторая секция 'красная'не в том месте.

Я также получаю сообщение об ошибке

Error: ExpressionChangedAfterItHasBeenCheckedError

Может кто-нибудь объяснить эту ошибку, и я думаю, что это причина того, что диаграмма не работает правильно.

Answer 1

Я думаю, что неправильное размещение было в том, что вы неправильно внедрили формулу для смещения, и вы выдвинули предыдущие значения до вычисления текущего смещения.

Причина ошибки заключается в том, что вы изменили смещение длякомпоненты, которые уже отрисованы, но рендеринг еще не завершен.Чтобы избавиться от этого, перед рендерингом нужно все просчитать.

Я изменил ваш Stackblitz: https://stackblitz.com/edit/svg-donuts-ng2c4j

Надеюсь, это поможет; -)