Угловой 7 и угловой материал, изменяющий цвет строки таблицы источника данных, когда она отмечена флажком, позволяет окрашивать одну строку

Question

Мне нужно добавить флажок в таблицу материалов, показывающую несколько строк данных, и если пользователь проверил это, полная строка должна изменить цвет на зеленый или что-то еще.

с этим stackblitz , если пользователь выберет одну строку, она станет зеленой, а если выберет другую, предыдущая выключится, а новая будет окрашена.

Я использовал эту функцию, чтобы получить идентификаторстрока:

changeColor(id)
   {
     this.coloredRow = id;
   }

А вот моя таблица источника данных материала:

<table mat-table [dataSource]="dataSource" matSort matSorActive="unit_date_added" disableClear matSortDirection="asc"
    *ngIf="!showSpinner">
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>

      </th>
      <td mat-cell *matCellDef="let row"  (click)="changeColor(row.location_id_auto)" >
        <mat-checkbox>
        </mat-checkbox>
      </td>
    </ng-container>
    <ng-container matColumnDef="hh_id">
      <th mat-header-cell *matHeaderCellDef>HH ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.hh_id}}</td>
    </ng-container>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef>UNIT ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.uid}}</td>
    </ng-container>

    <ng-container matColumnDef="name_en">
      <th mat-header-cell *matHeaderCellDef>Unit Type</th>
      <td mat-header *matCellDef="let row">{{row.name_en}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-header *matCellDef="let row">{{row.location_id_auto}}</td>
    </ng-container>



    <tr class="example-expanded-row mat-column-name" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="mat-column-name" mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" [ngClass]="{'highlight2': coloredRow == row.location_id_auto}">

    </tr>
  </table>

И стиль CSS:

.highlight2{
     background: #42A948; /* green */
   }

Текущее поведение таково, что только одинЦвет строки будет изменен.

Answer 1

В идеале я думаю, что вы хотите отслеживать, проверена ли строка в вашем массиве данных / вашей модели.Я изменил ваш stackblitz с помощью дополнительного свойства checked, которое устанавливается с помощью флажка и на котором основывается окраска строки.

Свойство checked устанавливается с помощью двух-способ связывания данных с использованием ngModel:

<mat-checkbox [(ngModel)]="row.checked"></mat-checkbox>

Установка цвета строки такая же, как и раньше, просто используйте свойство checked текущей строки:

<tr class="mat-column-name" mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" [ngClass]="{'highlight2': row.checked}">

Answer 2

Вот решение.

Я основал его на этой ссылке также в https://material.angular.io/components/table/overview

Вот код:

app.component.html

<table mat-table [dataSource]="dataSource" matSort matSorActive="unit_date_added" disableClear matSortDirection="asc"
    *ngIf="!showSpinner">
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>

      </th>
      <td mat-cell *matCellDef="let row"  (click)="changeColor(row.location_id_auto)" >
        <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)"> 
        </mat-checkbox>
      </td>
    </ng-container>
    <ng-container matColumnDef="hh_id">
      <th mat-header-cell *matHeaderCellDef>HH ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.hh_id}}</td>
    </ng-container>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef>UNIT ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.uid}}</td>
    </ng-container>

    <ng-container matColumnDef="name_en">
      <th mat-header-cell *matHeaderCellDef>Unit Type</th>
      <td mat-header *matCellDef="let row">{{row.name_en}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-header *matCellDef="let row">{{row.location_id_auto}}</td>
    </ng-container>



    <tr class="example-expanded-row mat-column-name" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="mat-column-name" mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" (click)="selection.toggle(row)" [ngClass]="{'highlight2': selection.isSelected(row)}">

    </tr>
  </table>

app.component.ts

import { Component } from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  coloredRow:any;
  selection = new SelectionModel(true, []);
  displayedColumns = ['select', 'location_id_auto', 'name_en'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
  constructor(){}
  changeColor(id)
  {
    this.coloredRow = id;
  }
}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {location_id_auto: 1, name_en: 'Hydrogen', },
  {location_id_auto: 2, name_en: 'Helium'},
];

Я просто добавил модель выбора.

Answer 3

Вы хотите, чтобы несколько строк могли менять цвет?измените свой код на это: в HTML:

<table mat-table [dataSource]="dataSource" matSort matSorActive="unit_date_added" disableClear matSortDirection="asc"
    *ngIf="!showSpinner">
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>

      </th>
      <td mat-cell *matCellDef="let row"   >
        <mat-checkbox>
        </mat-checkbox>
      </td>
    </ng-container>
    <ng-container matColumnDef="hh_id">
      <th mat-header-cell *matHeaderCellDef>HH ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.hh_id}}</td>
    </ng-container>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef>UNIT ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.uid}}</td>
    </ng-container>

    <ng-container matColumnDef="name_en">
      <th mat-header-cell *matHeaderCellDef>Unit Type</th>
      <td mat-header *matCellDef="let row">{{row.name_en}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-header *matCellDef="let row">{{row.location_id_auto}}</td>
    </ng-container>



    <tr class="example-expanded-row mat-column-name" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="mat-column-name" mat-row (click)="changeColor(i)" *matRowDef="let row; index as i; columns: displayedColumns;" [ngClass]="{'highlight2': coloredRow[i] == true}">

    </tr>
  </table>

int ts:

coloredRow:boolean[]=[];
changeColor(index)
  {
    this.coloredRow[index] =!this.coloredRow[index];
  }