Как изменить цвет mat-cell на основе ответа json в Mat-Dynamic-Table Angular?

У меня есть динамическая таблица матов, чтобы показать ответ json, который я получаю от rest api. Я хочу изменить цвет ячейки в зависимости от некоторого условия. Но если я попытаюсь применить [ngStyle], он применяется ко всей строке. Я хочу применить его только к определенной ячейке,

  <mat-table #table [dataSource]="dataSource">
    <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
      <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
      <mat-cell *cdkCellDef="let data" [ngStyle]="{'color': data.name == 'Boron' ? 'green':'red'}">{{ column.cell(data) }}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

Структура JSON:

     [ 
         {
          "col1":   {"name":"Boron","grade":A15},
          "col2":   [A15],
         },
         {
          "col1":   {"name":"Hydrogen", "grade":A28},
          "col2":   ["Hydrogen"],
         },
         {
           "col1":   {"name":"Helium", "grade":A56},
           "col2":   ["Helium","A56"],
         },
     ]

В приведенной выше структуре столбец 1 предназначен для отображения значений в таблице, а столбец 2 - это значение для изменения цветового кода конкретной строки.

Будем признательны за любую помощь !!!!


person S.M.Priya    schedule 01.04.2020    source источник


Ответы (1)


Вы можете сделать что-то вроде этого, изменив свой ngStyle как

[ngStyle]="{'color': data.name == 'Boron' && column.header == "your table header name where you want this color" ? 'green':'red'}"

Пример

введите здесь описание изображения

В HTML

 <ng-container *ngFor="let column of columnsDef">
<ng-container [matColumnDef]="column.id">
  <th mat-header-cell *matHeaderCellDef> {{column.id}} </th>
  <ng-container *ngIf="!column.dynamicCellComponent">
    <td mat-cell *matCellDef="let element"  [ngStyle]="{'color':column.id=='position' && element.position==1 ? 'red':''}" > 
      {{element[column.id]}}
    </td>
  </ng-container></ng-container></ng-container>  

Надеюсь это поможет!

person Goskula Jayachandra    schedule 03.04.2020
comment
Вы можете поделиться стеком для этого? - person S.M.Priya; 03.04.2020
comment
вот это stackblitz.com/edit/angular-dynamic-cell-mat -table-jffpgj - person Goskula Jayachandra; 03.04.2020
comment
Здесь вы жестко запрограммировали имя столбца «позиция» и значения столбца как «1» справа. Для меня все должно быть динамичным. - person S.M.Priya; 07.04.2020
comment
Вы сказали, что при определенных условиях вам следует изменить цвет, можете ли вы сказать мне, в каком состоянии, или создать аналогичный JSON, и можете ли вы поделиться со мной. - person Goskula Jayachandra; 07.04.2020
comment
{col1: {name: Boron, grade: A15}, col2: [A15],}, в этом вам нужно изменить цвет сорта, это правильно - person Goskula Jayachandra; 08.04.2020
comment
у вас будет два имени столбца и оценка, правильно ли вы можете опубликовать изображение своей таблицы - person Goskula Jayachandra; 08.04.2020
comment
{col1: {name: Boron, grade: A15}, col2: [A15],}, в этом вам нужно изменить цвет сорта, это правильно - да, правильно. Таблица только условная. В этой структуре JSON col1 для отображения результата в таблице. col2 предназначен для изменения цвета для определенных значений строки - person S.M.Priya; 09.04.2020
comment
Вы можете иметь какое-нибудь представление об этом? - person S.M.Priya; 11.05.2020
comment
Привет, @SMPriya, я пробовал, проверьте это однажды stackblitz.com/ edit / angular-dynamic-cell-mat-table-jffpgj, надеюсь, это тот, который вы ищете - person Goskula Jayachandra; 11.05.2020
comment
Привет, @ user12129132, спасибо за твой повтор. Это ожидаемый. Но я думаю, что вы жестко кодировали значения столбцов, вставляя их в JSON2. Для меня это должно быть динамично - person S.M.Priya; 12.05.2020
comment
Можете ли вы создать stackblitz для своего приложения, это будет легко, если вы это сделаете - person Goskula Jayachandra; 12.05.2020
comment
правильно было только то, что вы сделали. единственное, что ... вы жестко кодировали значения, передаваемые из JSON1 в JSON2. Если его динамическая .. моя проблема будет решена JSON2.push ({name: item.col1.name, grade: item.col1.grade, color: item.col2}). См. Здесь имя и оценка были жестко запрограммированы. Потому что я буду получать динамические данные через сервисы - person S.M.Priya; 12.05.2020
comment
Получаете ли вы сведения, отображаемые в таблице, из API - person Goskula Jayachandra; 12.05.2020
comment
Давайте продолжим это обсуждение в чате. - person Goskula Jayachandra; 12.05.2020
comment
Вы нашли какое-нибудь решение для этого? - person S.M.Priya; 26.05.2020