Несовместимость связывания угловых шаблонов - PullRequest
Новая
       9

Несовместимость связывания угловых шаблонов

0 голосов
/ 06 февраля 2019

Я столкнулся с несоответствием в привязке класса шаблона Angular при использовании пакета @angular/material@7.3.0.

Я попытался воспроизвести его в меньшем примере, но он работал правильно.К сожалению, вся кодовая база, связанная с этой ошибкой, слишком велика.

Теперь перейдем к делу: я использовал компоненты mat-horizontal-stepper и mat-step.Все определенные мной узлы mat-step отображаются как узлы mat-step-header.mat-step-header состоит из трех элементов: ряби, значка и метки.Его шаблон определяется здесь: https://github.com/angular/material2/blob/7.3.0/src/lib/stepper/step-header.html

<div class="mat-step-header-ripple" mat-ripple [matRippleTrigger]="_getHostElement()"></div>
<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected">
  ...
</div>
<div class="mat-step-label"
     [class.mat-step-label-active]="active"
     [class.mat-step-label-selected]="selected"
     [class.mat-step-label-error]="state == 'error'">
    ...
</div>

Выбранный шаг получает входную переменную selected, установленную в true, и связывает ее значение с классами mat-step-icon-selected и mat-step-label-selected.В моем приложении переменная selected правильно добавляет класс mat-step-label-selected к метке div, но не к значку div.Как видите, значение переменной selected даже отображается в mat-step-header:

ng-reflect-selected="true"

DevTools screenshot

Я отлаживал его до методов checkAndUpdateView и checkAndUpdateNode.Строка классов, которая должна быть назначена узлу иконки, была задана как переменная givenValues, и она просто не содержала mat-step-icon-selected class.

Вы знаете, как отследить эту ошибку?Куда мне смотреть?

...