динамически создаваемый mat-checkbox не правильно отображается

Question

Я динамически создаю <mat-checkbox> элементы из входящих данных, извлеченных с помощью API.

component.ts:

this.content = sanitizer.bypassSecurityTrustHtml(`<mat-checkbox>test</mat-checkbox>`)

component. html

<div [innerHTML]="content"></div>

но ввод флажка не отображается, такая же проблема возникает, если я использовал <input type="checkbox"> вместо `

, и он отображается правильно, если я статически добавил <mat-checkbox к компоненту. html

пожалуйста, проверьте этот репо: https://stackblitz.com/edit/angular-8heckn

примечание:

this.content - это строка, а не объект. потому что я хочу добавить дополнительные пробелы (табуляции) перед каждым дочерним вводом.

например:

• программирование
  • front-end
    • Angular
    • Реакция
    • Vue
  • back-end
    • node.js
    • express. js
    • php

Answer 1

"Angular не обрабатывает HTML добавленное динамически, оно просто дословно добавляет его, за исключением некоторой очистки, чтобы предотвратить проблемы безопасности." [ см. Вопрос Stackoverflow Как динамически добавлять внутренние HTML с angular 2 компонентами ]

Чтобы узнать о добавлении Angular компоненты динамически, см. следующее:

• Динамическое добавление и удаление компонентов в Angular
• Angular2 : Вставить динамический c компонент как дочерний элемент контейнера в DOM
• Angular: Как динамически загрузить компонент, определенный строкой?