Индекс строки для выделения выбранной строки - PullRequest
Новая
       14

Индекс строки для выделения выбранной строки

0 голосов
/ 14 сентября 2018

Я хочу, чтобы при выборе строки таблицы она выделяла выбранную строку.В настоящее время, если я выбираю строку, она выделяет все строки.Вот как это выглядит: selected row

Проблема в том, что когда я использовал row.index в моем html, он не работает.Он говорит, что не распознает индекс.Как заставить это работать?

HTML-код: 

<table class="table table-sm table-hover table-borderless">
  <tr *ngFor="let filter of pagedFilters">
    <td [ngClass]="{'highlight': selectedRowIndex == row}" 
      (click)="showForEdit(filter, row)">{{filter.viewType | filter: filterTypes }}</td>
    <td>
      <a><i class="oi oi-list" ></i></a>
    </td>
  </tr>
</table>

CSS-код: 

.highlight {
  background: green;
}

Угловой код: 

selectedRowIndex: number = -1;

showForEdit(filter: Filter, row) {
    this.selectedFilterChange.emit(filter);
    this.selectedRowIndex = row;
}

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Вы можете сделать следующее, передав индекс: вот рабочий стекблиз

https://stackblitz.com/edit/angular-bskjjr

<table class="table table-sm table-hover table-borderless">
  <tr *ngFor="let filter of pagedFilters ; let i = index">
    <td [ngClass]="{'highlight': selectedRowIndex === i}" 
      (click)="showForEdit(i)">{{filter}}</td>
    <td>
      <a><i class="oi oi-list" ></i></a>
    </td>
  </tr>
</table>
0 голосов
/ 14 сентября 2018

Использовать индекс вместо строки .. 

<table class="table table-sm table-hover table-borderless">
  <tr *ngFor="let filter of pagedFilters; let i =index">
    <td [ngClass]="{'highlight': selectedRowIndex == i}" 
      (click)="showForEdit(filter, i)">{{filter.viewType | filter: filterTypes }}</td>
    <td>
      <a><i class="oi oi-list" ></i></a>
    </td>
  </tr>
</table>
...