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

Question

我一直在研究一个 toast 组件，它将接受 html 标签作为字符串。因此，我需要遍历下面的 errorMsgs 数组并动态构建一个列表，但问题是我里面有一个 *ngFor 并且它正在循环数组，但我无法在模板中打印"msg"。

请告诉我是否有办法遍历数组并构建列表并将其作为字符串返回。

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>

希望对您有所帮助！！