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

【问题标题】：How to highlight multiple selected row in angular 4如何在角度4中突出显示多个选定的行
【发布时间】：2018-02-19 06:18:05
【问题描述】：

如何在角度 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>

【问题讨论】：

你有什么错误吗？可以查一下吗？
这只是我的代码的一个快照。我正在寻找突出显示多行的逻辑。
那么我的朋友在 SO 和 Google 上也有很多问题可用。你没有检查过吗？ stackoverflow.com/questions/35167463/…
Angular2: how bind to select multiple的可能重复

标签： html angular angular2-template

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

}

【讨论】：

你可以edit你原来的答案而不是添加一个新的

【解决方案3】：

使用 Angular 类指令非常简单

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

现在，当row.selected 为真时，它将向该行添加类selected

【讨论】：

【解决方案4】：

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

【讨论】：