將類添加到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> 

users.component.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例如用法