Angular 5 - SVG с * ng для возникновения проблем с рендерингом в IE11, но не в Chrome

Question

Я создал компонент в Angular 5, который будет использоваться для индикации прохождения ряда этапов.Он отлично работает в Chrome, но при тестировании в IE11 он имеет странное поведение, которое делает его непригодным для использования.

Компонент использует SVG и генерирует элементы изображения, используя угловые директивы и привязки атрибутов.В IE11 он не отображает сразу все элементы.Он загрузит пустой индикатор выполнения и метку «Этап 1».Если я щелкну в одном из текстовых полей, а затем уйду, он загрузит метку «Этап 2».После повторения этого несколько раз это в конечном итоге сделает все.Однако при изменении значений в текстовых полях обновление происходит не так гладко, как в Chrome.

Вот пример StackBlitz , демонстрирующий проблему.

Кажется, это проблема, связанная с использованием ngFor в элементе SVG, но я понятия не имею, почему или как ее решить.

Любая помощь будет принята с благодарностью.

---------- РЕДАКТИРОВАТЬ -------------

С тех пор я обнаружил, что проблема вызвана однимконкретная угловая привязка.Если я удалю следующую привязку из строки 14 progress-stage-bar.component.html , то IE будет работать как положено.

[class.current-stage]="isCurrentStage(stage)"

Я попытался заменить это на [ngClass]вместо этого, но возникает та же проблема.

Может кто-нибудь помочь мне понять, почему это проблема для Internet Explorer, когда он работает без проблем в Chrome?

Answer 1

После некоторого тычка и подталкивания я обнаружил, что это та же проблема, что и описанная в этом StackOverflow Question .

В двух словах, Internet Explorer 11 не поддерживает свойство JavaScript "classList" для элементов SVG, которое используется Angular для обработки любых привязок [ngClass] или [class. ??????].во время выполнения.

Какой-то добрый человек уже создал для этого "shim" или "polyfill" с именем classlist.js .Об этом уже есть комментарий в polyfill.ts нового проекта Angular:

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

Это было поднято как ошибка на странице Angular GitHub, но официальный ответ, кажется, заключается в использовании уже упомянутой прокладки.