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

【问题标题】：*ngFor output different HTML for every item in Angular 2+*ngFor 为 Angular 2+ 中的每个项目输出不同的 HTML
【发布时间】：2018-06-03 13:15:21
【问题描述】：

我想制作通知栏并有 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...

我可以在组件中创建一个 ugly 方法 来打印带有这些 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>

【问题讨论】：

标签： angular frontend ngfor ng-container html-templates

【解决方案1】：

components.ts

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

template.html

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

Ng-run Example

【讨论】：

【解决方案2】：

您可以使用*ngIf根据状态显示消息

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

【讨论】：