Как создать шаблон динамического c html с литералами шаблона и * ngFor в Angular

Question

Я работал над компонентом toast, который будет принимать теги html в виде строки. Следовательно, мне нужно l oop через указанный ниже массив errorMsgs и динамически создавать список, но проблема в том, что у меня есть * ngFor внутри него, и он зацикливает массив, но я не могу напечатать "msg" в шаблоне.

Скажите, пожалуйста, есть ли способ l oop через массив, построить список и вернуть его в виде строки.

const errorMsgs = ['Not Found', 'Server Error'];

private getMessagesAsHtml(errorMsgs: string[]){
        return `
            <ul>
                <li *ngFor="let msg for ${errorMsgs}">
                    {{msg}}
                </li>
            </ul>
        `;
    }

Answer 1

Наконец я решил это, используя только ES6.

const errorMsgs = ['Not Found', 'Server Error'];

private getMessagesAsHtml(errorMsgs: string[]){
     return `
           <ul>
              ${errorMsgs.map(msg => `
                  <li> ${msg} </li>
                `)}
           </ul>
        `;
     }

Answer 2

Я думаю, что вместо

<li *ngFor="let msg for ${errorMsgs}">
    {{msg}}
</li>

Вы должны использовать это так:

<li *ngFor="let msg of ${errorMsgs}">
    {{msg}}
</li>

Надеюсь, это поможет !!