Селектор компонентов в переменной - Угловой 2

Question

Я написал свой собственный модуль таблицы. Вызов его в HTML-коде выглядит так:

<my-table [data]="variableWithArr"></my-table> 

Теперь отображается довольно красивая таблица. Круто. Но что, если я хочу иметь индикатор выполнения в каком-то столбце таблицы? Я думал, что я мог бы поставить HTML-код с компонентом выбора в качестве значения, например самонастройки ProgressBar, например:

for(let record of variableWithArr) { 
    record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>'; 
} 

Unfortunatelly, Угловое отображает только HTML-код, но dooes не интерпретировать его как селектор компонентов, поэтому я получаю что-то подобное в DOM:

<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td> 

Как это исправить?

Answer 1

При взгляде на docs вы должны использовать свойство [innerHTML], но чтобы быть понятным, используйте его, только когда доверяете коду !!

Так должно быть что-то вроде этого:

<td [innerHTML]="record"></td> 

Answer 2

Это не так, как угловые работы - вы не можете вставить произвольный HTML (innerHTML или иным образом), и ожидать, что директивы будут подобраны & применены. Угловая работа таким образом потребовала бы отправки всего компилятора в браузер и могла бы превзойти целую цель всех больших оптимизаций, которые могут быть выполнены с помощью компиляции с опережением (AOT).

tl; dr; Нет, вы не можете этого сделать, и это не имеет ничего общего с проектом ng-bootstrap, а скорее с дизайнерскими решениями, стоящими за Angular.