Почему флажок не работает должным образом в Angular, когда я передаю тип с обозначением в скобках?

Question

Я в основном потратил часы на исправление проблемы в динамической угловой (реактивной) форме, которая использует флажок. В итоге я обнаружил, что настройка <input [type]="'checkbox'"> дает другой и неожиданный результат, тогда как <input type="checkbox"> работает, как и ожидалось.

Это ошибка или я что-то не так сделал? Я всегда думал, что скобочная запись позволяет мне передавать объекты TypeScript внутри моего шаблона, поэтому [bla]="'foo'" будет таким же, как bla="foo".

Вот минимальный пример для игры: https://stackblitz.com/edit/angular-xqwwby

Было бы хорошо, если бы кто-то мог объяснить мне, почему поведение отличается. И, возможно, другие люди тоже найдут это полезным при работе с флажками в угловых формах. Спасибо!

Answer 1

Похоже, что это ограничение Angular, которое было сообщено как ошибка (https://github.com/angular/angular/issues/7329),, но проблема в GitHub была закрыта командой Angular.

См. Также ответы здесь: Нечетное поведение при рендеринге динамически, тип флажка типа ввода Угловой 2 +

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