Блог

Главная - Вопросы по программированию - Для таблиц Angular 9 mat есть ли способ установить цвет CSS для строки только в одном месте?

Для таблиц Angular 9 mat есть ли способ установить цвет CSS для строки только в одном месте?

#css #angular #angular9 #mat-table

#css #angular #angular9 #мат-таблица

Вопрос:

В моей мат-таблице (Angular 9) я хочу иметь функцию, которая определяет класс CSS для каждой строки…

   getRowClass(item: Item): string {
    let class_ = "";
    if (...condition1...) {
        ...
    } else {
      class_ = 'warm';
    }
    return class_;
  }

Классы довольно просты и обычно состоят только из установки цвета…

 .hot {
        color: red !important;
}

Я настраиваю функцию для строки следующим образом…

 <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef> category </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.category }}</mat-cell>
    </ng-container>

    ...
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="getRowClass(row)"></mat-row>
</mat-table>

Однако я замечаю, что в мат-таблице мат-ячейка определяет свой собственный атрибут «color». Один из способов переопределить его — определить для каждого класса «<mat-cell *matCellDef»

 [ngClass]="getCSSClass(item)"

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

Комментарии:

1. Вы пытались добавить «!важно»?

2. кажется, что в вашем коде есть какой-то перебор css, иначе логика, которую вы использовали для вызовов мат-строк, должна работать нормально и изменять весь фон строки. <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="getRowClass(row)"></mat-row>

3. @oz1985oz, да, пробовал !важно. Обновил мой вопрос, чтобы включить его. По-прежнему никакой разницы.

4. Можете ли вы создать пример stackblitz? Я не совсем понимаю вашу проблему stackblitz.com/edit/angular-rph4cs

Ответ №1:

вам просто нужно добавить mat-cell класс в качестве подкласса горячего класса, потому mat-cell что класс по умолчанию имеет color стиль

Стиль материала

 .mat-cell, .mat-footer-cell {
    color: rgba(0,0,0,.87);
}

и вам нужно добавить

 .hot .mat-cell {
  color: blueviolet !important
}

Ответ №2:

Вместо того, чтобы просто возвращать строку, попробуйте вернуть объект в этом формате — { ‘classname’: true }

 getRowClass(item: Item): object {
  let class_ = "";
  if (...condition1...) {
      ...
  } else {
    class_ = 'warm';
  }
  return { class_: true };
}

Ответ №3:

Если вы используете class атрибут напрямую, он должен работать даже без !important операторов.

 <mat-row *matRowDef="let row; columns: displayedColumns;" [class]="getRowClass(row)"></mat-row>

Вот рабочий StackBlitz

Метки: