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

Answer 2

您可以在模板中添加以下条件以添加“className”类。

<tr *ngFor="let user of users" id="{{user.user_id}}">
     <td>
         <span>{{user.user_id}}</span>
    </td>
    <td>
         <delete (deleteUser)="deleteUser(user.user_id)" [class.className]="isDeleted"></delete>
    </td>
</tr>

将类添加到Angular 2中的一个特定行

2 个答案: