Angular 2/4：如何从 DOM 动态添加的元素中添加和删除类名

Question

我正在尝试建立一个列表（一种您在 Facebook 上看到的通知系统）。该列表使用 JSON 获取，并由 ngFor 在 UI 上生成。我有一个默认的 css 类（来自 JSON 的未读）应用于它。我希望根据任何事件动态更改 DOM 上的该类（现在假设底部有一个按钮）。所以基本上我会生成很多 DIV，除此之外，我只需要在一些嵌套的 span 标签上更改 css 类。

我可以为跨度分配一个唯一的 ID，所以基本上我如何使用 Angular 2 定位这些跨度并更改 css 类。

关于如何去做的任何指示？我正在尝试使用 Angular 2 来实现。使用普通的 javascript 或 jquery 将是我最后的手段。

这是我的 HTML：

 <ion-row *ngFor="let m of messages">
     <ion-col col-12 >
    <div class="talk-bubble border" [ngClass]="[m.position]">
      <span class="talktext">{{m.message}}</span>     
      <span #elem [attr.id]="m.iconId" class="message-status" [ngClass]="[m.status]" ></span>
      <span class="datedisplay">{{m.date}}</span>
    </div>
     </ion-col>
  </ion-row>

Answer 1

您可以将对象绑定到 [ngClass] 指令：

<div [ngClass]="{'class-one': isClassOneActive, 'class-two': isClassTwoActive}">

相应地更新打字稿中的isClassOneActive和isClassTwoActive布尔值。