单击动作按钮，如删除如何突出显示角度相关的行

Question

点击动作按钮，例如编辑，删除如何使用angular4突出显示下表中的相关特定行

 <div class="rTable">
  <div class="rTableRow">
    <div class="rTableHead" *ngFor="let tableKey of ResultData1">
      <strong>{{ tableKey}}</strong>
    </div>
  </div>
  <div class="rTableRow" *ngFor="let data of dataFromServer ; let i = index;" (click)="setClickedRow(i)" >
    <div class="rTableCell">{{data.id}}</div>
    <div class="rTableCell">{{data.firstName}}</div>
    <div class="rTableCell">{{data.email}}</div>
    <div class="rTableCell">{{data.phoneNum}}</div>
    <div class="rTableCell">{{data.order}}</div>

    <div class="rTableCell">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
        Add
      </button>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal" (click)="dataIndex(i)">
        Edit
      </button>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" (click)="deleteData(i)">
        Delete
      </button>
    </div>
  </div>
</div>

Answer 1

您必须使用ngClass

<div class="rTable">
  <div class="rTableRow">
    <div class="rTableHead" *ngFor="let tableKey of ResultData1">
      <strong>{{ tableKey}}</strong>
    </div>
  </div>
  <div class="rTableRow" [ngStyle]="{'background-color':data.id === selectedId ? 'green' : 'white' }" *ngFor="let data of dataFromServer ; let i = index;" >
    <div class="rTableCell">{{data.id}}</div>
    <div class="rTableCell">{{data.firstName}}</div>
    <div class="rTableCell">{{data.email}}</div>
    <div class="rTableCell">{{data.phoneNum}}</div>
    <div class="rTableCell">{{data.order}}</div>

    <div class="rTableCell">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal  (click)="AddIndex(data)">
        Add
      </button>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal" (click)="dataIndex(data)">
        Edit
      </button>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" (click)="deleteData(data)">
        Delete
      </button>
    </div>
  </div>
</div>

在您的TS中

，您可以调用这些方法，然后分配点击的值，如

dataIndex(data){
this.selectedId = data.id;
} 

您可以在所有方法中执行此操作