Angular 单击“编辑”“删除”等操作按钮，以高亮显示角度栏中的相关行

单击“编辑”等操作按钮后，删除如何使用angular4突出显示下表中相关的特定行

{{tableKey}}
{{data.id}
{{data.firstName}
{{data.email}
{{data.phoneNum}
{{data.order}
添加
编辑
删除

您必须使用

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>

---

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

您正在使用哪个库来显示网格？哪个模块的意思是，我没有收到您的问题您可以更清楚地了解您的问题并添加最新代码以进一步了解。真的！你需要先读一读这个@AbhishekEkaanth是的，它起作用了，只是我做了一些小改变，非常感谢。

<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>

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