*ngFor 为 Angular 2+ 中的每个项目输出不同的 HTML

Question

我想制作通知栏并让HTML模板如下：

<ul>
<li *ngFor="let notification of notifications">
<div class="message"> ... </div>
</li>
</ul>

但对于不同的通知，应该有不同的message模板，如下所示：

<div class="message"> <b>NEW</b> message arrived </div> or
<div class="message"> Message is <b>DELETED</b> </div> or
<div class="message"> Your message is <b>SENT</b> </div> etc...

我可以在组件中制作一个丑陋的方法来使用这些 HTML 标签打印消息，但是有没有更优雅的方法呢？

丑陋的方法：

resolveMessage(status) {
if (status == 'new') {
return '<b>NEW</b> message arrived';
} else if (status == 'sent') {
return 'Your message is <b>SENT</b>';
}
}
<div class="message"> {{ resolveMessage(notification.status) }} </div>

Answer 1

components.ts

messages = {
new: `<b>NEW</b> message arrived`,
sent: `Your message is <b>SENT</b>`,
deleted: `Message is <b>DELETED</b>`
}

模板.html

<li *ngFor="let notification of notifications">
<div class="message" [innerHTML]="messages[notification.status]"></div>
</li>

吴润示例

Answer 2

> 您可以使用*ngIf基于状态显示消息

<li *ngFor="let notification of notifications">      
<div *ngIf="notification.status ==='new'" class="message"> NEW  message arrived</div>
</li>