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

时间:2017-09-11 04:49:27

标签: html angular angular2-template

如何突出显示角度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>

4 个答案:

答案 0 :(得分:1)

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

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

现在,当selected对行

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

答案 1 :(得分:0)

要突出显示行,您需要突出显示单元格(<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>

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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);
}

}