angular - 将类添加到 Angular 2 中的某一特定行

Question

我有一个包含多行的选项卡，我只想在单击删除组件时将类添加到当前行。我的删除组件返回我要删除的行的 ID。

我的问题是，我不知道如何将类添加到当前行(使用我认为的 id)

这是我的代码:

users.tempate.html:

<tr *ngFor="let user of users" id="{{user.user_id}}">
         <td>
             <span>{{user.user_id}}</span>
        </td>
        <td>
             <delete (deleteUser)="deleteUser($event)"></delete>
        </td>
    </tr>

用户.组件.ts:

export class Users(){
 isDeleted = false;
 constructor(){}
  deleteUser(user_id){
      this.isDeleted = true;
  } 
}

有什么想法吗？

Answer 1

在 HTML 中为该行添加一个模板变量并将其传递到方法中:

<tr *ngFor="let user of users" id="{{user.user_id}}" #row>
     <td>
         <span>{{user.user_id}}</span>
    </td>
    <td>
         <delete (deleteUser)="deleteUser(user.user_id, row)"></delete>
    </td>
</tr>

现在您可以在您的方法中添加该类:

deleteUser(user_id, row){
    this.isDeleted = true;
    row.classList.add("deleted");
} 

---

Plunker for example usage