Question

如何突出显示角度4中的多个选定行

在这里，我可以使用复选框进行编辑并执行其他操作。我正在寻找的是突出显示已检查的行。

<tbody>
   <tr *ngFor='let row of rowData' [ngClass]="{ 'selected': row.selected }">
     <td class="text-center>
         <input type="checkbox" [(ngModel)]="row.selected" />
     </td>
     <td>
         <input type="text" *ngIf="row.editable" [(ngModel)]="row.name" />
         <ng-container *ngIf="!row.editable">{{row.name}}</ng-container>
         <!-- You can use span or whatever instead of ng-container-->
     </td>
     <!-- Repeat for other cells -->      
   </tr>
</tbody>

Answer 1

简单易用，只需使用angular class directive

<tr *ngFor='let row of rowData' [class.selected]="row.selected">

现在，当selected对行

为真时，它会添加类row.selected

Answer 2

要突出显示行，您需要突出显示单元格（<td>）。据我所知，你不能突出显示一行。

这是逻辑：

<tbody>
   <tr *ngFor='let row of rowData'>
     <td class="text-center" [class.selected]="row.selected">
         <input type="checkbox" [(ngModel)]="row.selected" />
     </td>
     <td [class.selected]="row.selected">
         <input type="text" *ngIf="row.editable" [(ngModel)]="row.name" />
         <ng-container *ngIf="!row.editable">{{row.name}}</ng-container>
         <!-- You can use span or whatever instead of ng-container-->
     </td>
     <!-- Repeat for other cells -->      
   </tr>
</tbody>

Answer 3

HTML：

<tr *ngFor="let record of mf.data; let i = index" [attr.data-index]="i" [className]=" selectedAll==true || selectedRow.indexOf(i)>-1 ?
              'pointer selected' : 'pointer'">
    <td class=" text-left" width="20">
        <input type="checkbox" (change)="selectAll(i)" [checked]="selectedAll == true">
    </td>
              ...
</tr>

TS：

export class YourComponent implements OnInit {
}

Answer 4

HTML：

            <tr *ngFor="let record of mf.data; let i = index" [attr.data-index]="i" [className]=" selectedAll==true || selectedRow.indexOf(i)>-1 ?
              'pointer selected' : 'pointer'">
              <td class=" text-left" width="20">
                <input type="checkbox" (change)="selectAll(i)" [checked]="selectedAll == true">
              </td>
              ...
            </tr>

TS：

export class YourComponent implements OnInit {
selectedRow: any;
selectedAll: boolean = false;

constructor(){
   this.selectedRow = [];
}

selectAll(index) {
if (typeof (index) == 'undefined') {
  this.selectedAll = !this.selectedAll;
  this.selectedRow = [];
} else {
  this.selectedRow.push(index);
}

}

如何突出显示角度4中的多个选定行

4 个答案: