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

Question

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

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

关于如何去做的任何指示？。我正在尝试使用 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指令。文档可以在这里找到： https://angular.io/api/common/NgClass

Answer 2

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

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

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

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

Angular 2/4 : How to add and remove class names from dynamically added elements from DOM

angular2-directives

angular