如何在 Angular 中使用模板文字和 *ngFor 创建动态 html 模板

Question

I have been working on a toast component which will accept html tags as string. Hence I need to loop through below errorMsgs array and build a list dynamically, but the problem is I have a *ngFor inside that and it's looping the array, but I'm not able to print "msg" in the template.

Please tell me if there is a way to loop through array and build a list and return it as a string.

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

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

Answer 1

Finally I solved it using ES6 only.

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

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

Answer 2

I think instead of

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

You should use it like this:

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

Hope it helps!!