Angular 2 调用基于 class 的函数应用于 div

Question

我有一个带有 *ngFor 的 div 来循环遍历一组消息。

<div *ngFor="let message of messages;  let i=index" 
 [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i  }" 
(click)="onAddtoMessage(message.id); activeIndex = i"></div>

我正在对焦点项目应用 class "message-list-active"，此消息的颜色变为蓝色。

当我点击时我有一个点击事件我可以传递消息 ID。

问题是我如何通过不点击来传递 ID，而是传递应用了 'message-list-active' 的消息的 ID。因为以后可以默认选择随机消息，我需要他们的id。

Answer 1

使用[ngClass]

中的函数

<div *ngFor="let message of messages;  let i=index" 
 [focused]="i === activeIndex;" [ngClass]="{
        'message-list-active': activeClass(i, message)
 }" 
(click)="onAddtoMessage(message.id); activeIndex = i"></div>


activeClass(index, message){
   if(index === this.activeIndex){console.log(message.id)}
   return index === this.activeIndex;
}

Angular 2 调用基于 class 的函数应用于 div

Angular 2 call a function based on class applied on a div

javascript

css

ng-class

angular