Как выделить выбранный ряд таблицы при щелчке мышью с помощью Bootstrap 4 и Angular 6?

Question

У меня есть таблица Bootstrap с использованием наведения таблицы, и все работает правильно. .table-hover включает состояние наведения на строки таблицы в пределах <tbody>. У меня также есть этот метод:

listClick(event, newValue) {
    this.UploaderService.getFileName(newValue[1])
}

, который устанавливает имя файла из указанной строки, а затем другие методы из UploaderService использует эту переменную для выполнения указанных операций, таких как удаление, загрузка и т. Д.

Моя проблема в том, что все работает нормально, к сожалению, нажатая строка не подсвечивается, поэтому пользователь не полностью осведомлен о выбранной строке. Я хотел бы оставить эту строку выделенной в момент нажатия определенного действия над этим объектом, например удаления и т. Д.

Кроме того, я хотел бы иметь возможность выбрать несколько строк, используя комбинацию, например, щелчок мышью + cmd в случае Mac OS. Любые идеи, как я могу это сделать?

<div style="display: block;" class="table-div content table-responsive table-full-width"  >
   <table class="Table table table-hover">
     <div>
     <thead >
     <tr >
       <th style="width: 20vw; min-width: 150px; text-align: left " *ngFor="let cell of this.UploaderService.tableData2.headerRow">{{ cell }}</th>
     </tr>
     </thead>
     </div>
     <tbody style="  overflow:auto; height:60vh; margin-bottom:1vh; display: block; left: 0vw; right: 0vw">

         <tr *ngFor="let item of this.UploaderService.uploader.queue">
           <td><button type="button" (click)="item.remove()">Cancel</button>
                                             <div class="progress">
                       <div class="progress-bar bg-success"
                       [ngStyle]="{'width':item.progress+'%'}"></div>
                   </div>
           </td>
           <td>
           <div >{{item.file.name}}</div>
         </td>
           <td>
             <div >{{item.file.size}}</div>
           </td>
           <td>
           <div >{{item.file.type}}</div>
           </td>
           <td>
             <div >{{item.file.lastModifiedDate}}</div>
           </td>
     <tr *ngFor="let row of this.UploaderService.tableData2.dataRows">
       <td [ngClass]="{'active': selectedItem == cell}" (click)="listClick($event, row)" (dblclick)="listDoubleClick($event, row)"  style="cursor: pointer; width: 20vw; min-width: 150px; text-align: left" *ngFor="let cell of dateFormat(row)">{{cell}}</td>
     </tr>
     </tbody>
   </table>
 </div>

Я пытаюсь так:

ц

listClick(event, row) {

    row.isSelected = !row.isSelected;
    this.UploaderService.getFileName(row[1])

  }

HTML:

            <tr *ngFor="let row of this.UploaderService.tableData2.dataRows">


              <td [ngClass]="{'active': row.isSelected}" (click)="listClick($event, row)" (dblclick)="listDoubleClick($event, row)"  style="cursor: pointer; width: 20vw; min-width: 150px; text-align: left" *ngFor="let cell of dateFormat(row)">{{cell}}</td>
            </tr>

Answer 1

Простой способ - добавить один атрибут, например: isSelected: boolean вам dataRows, когда выбран один или несколько из них;

listClick(event, newValue, cell) {
    cell.isSelected = !cell.isSelected;
    this.UploaderService.getFileName(newValue[1])
}

но я настоятельно рекомендую вам использовать эту превосходную таблицу данных в угловых ngxDataTable

надеюсь, это поможет.