Как изменить цвет нескольких строк в пользовательском интерфейсе углового материала ClickClick

avatar
Ashad peal
9 августа 2021 в 05:21
126
1
0

Я могу изменить цвет ячейки, когда нажимаю showProfile(). Но если я нажму на следующую строку, предыдущий цвет исчезнет. Как сохранить постоянный цвет при каждом щелчке по любой строке?

У меня есть это в моем HTML:

   <ng-container *ngIf="col === 'name'">
      <mat-header-cell *matHeaderCellDef> {{ col | titlecase }} </mat-header-cell>
       <mat-cell *matCellDef=" let row" 
               [ngClass]="{'data-selected': selectedRow ===row.id}" >
      <a mat-button color="primary" (click)="showProfile(row['id'], row)"
        target="_blank">{{ row[col] }}</a>
      </mat-cell>
  </ng-container>

И ​​мой CSS:

    .data-selected {
         background-color:rgb(34, 110, 34);
       }

И ТС:

    selectedRow = -1;


showProfile(id, row) {
this.selectedRow = id;
this.dialog.open(ViewProfileAdminComponent, {
  width: '1800px',
  data: {
    userId: id,
    isAdmin: true,
  },
});

} This produces the following result: Заранее спасибо...

Источник
Eliseo
9 августа 2021 в 06:25
1

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

Ответы (1)

avatar
mr. pc_coder
9 августа 2021 в 06:25
1

Демонстрационный пример Потому что вы сделали selectedrow только один элемент. Вам нужно вернуть его в массив. Каждый щелчок вы должны вставить, если нет, и удалить, если он существует, в массив, и в условии вы должны проверить, находится ли он внутри него.

использовать

[ngClass]="{'data-selected': selectedRow.indexOf(row.id) !== -1}"

и в вашем компоненте измените selectedRow на array

 selectedRow=[];

затем в вашей функции

поместить ниже код

showProfile(id, row) {
     this.selectedRow.find(x=>x==id) ? this.selectedRow=this.selectedRow.filter(x=>x!=id) : this.selectedRow.push(id);