Как использовать @viewchildren для создания элементов?

Question

Я знаю, как использовать createcomponent фабрики компонентов разрешения, используя @viewchild. У меня есть много экземпляров моей ссылочной переменной шаблона, поэтому я использую @viewchildren, как создавать элементы.

Чтобы быть более понятным, у меня есть таблица в этой таблице, я показываю много продуктов питания. Эти продукты приходят из моей базы данных. Они классифицируются как завтрак, ужин и обед. Если я открою страницу определенного ресторана, я получу продукты на строке через запятую. Я разделяю их и храню в списке. Затем, как только таблица создана, я даю необходимые идентификаторы для строки. Затем, используя для l oop, я беру список, разделенный запятыми, а в другом для l oop я беру список продуктов из БД (которые классифицируются как BF, Обед и Ужин). Если названия продуктов одинаковы, я проверяю категорию списка БД, а затем с помощью document.getElementByID () добавляю их в нужную строку, используя .inner HTML ().

Теперь я перехожу на angular, если я попробую .inner HTML, теперь он не обрабатывается. Я использую fa-icon, так как он не перерисовывается, я могу видеть значок. Поэтому я создал ng-контейнер и выполнил приведенное ниже:

    @ViewChild('technologyAdded', { read: ViewContainerRef, static: false })
    private vcRef: ViewContainerRef;
    addIcon() {
    const factory = this.cfr.resolveComponentFactory(FaIconComponent);
    const component = this.vcRef.createComponent(factory);
    component.instance.iconProp = faMinusCircle;
    component.instance.ngOnChanges({});
    }

для HTML

    <table>
    <td><th>Breakfast</th></td>
    <td><th>Lunch</th></td>
    <td><th>Dinner</th></td>
    <tbody><tr id="breakfast" #menuitems><tr>
    <tbody><tr id="lunch" #menuitems><tr>
    <tbody><tr id="dinner" #menuitems><tr>

Поскольку у меня несколько строк, я должен использовать @viewchildren how продолжить? Дело не в том, что у меня есть только 3 столбца, а у меня 13, например, я дал три.

    for(let i=0;i<array.length;i++){
    for(let j=0;j<dbArray.length;j++){
    if(array[i]==dbArray[j].time){
    document.getElementByID(dbArray.time).innerHTML+=<fa-icon></fa-icon>
    }
    }}

    The dbArray.time gives if it is Lunch or DInner or any other

Если вышеприведенные утверждения не были ясны. Я поясню, что у меня много идентификаторов, и я должен добавить их в DOM, используя .inner HTML angular, не повторный рендеринг, если я использую .inner HTML ().