Если вы используете scss для своих стилей, вы можете использовать миксин, чтобы помочь сгенерировать код. Ваши стили быстро выйдут из-под контроля, если вы будете каждый раз ставить все свойства.
Это очень простой пример - на самом деле не более, чем подтверждение концепции, вы можете расширить его с помощью нескольких свойств и правил по мере необходимости.
@mixin mat-table-columns($columns)
{
.mat-column-
{
@each $colName, $props in $columns {
$width: map-get($props, 'width');
&#{$colName}
{
flex: $width;
min-width: $width;
@if map-has-key($props, 'color')
{
color: map-get($props, 'color');
}
}
}
}
}
Затем в вашем компоненте, где определена ваша таблица, вы просто делаете это:
@include mat-table-columns((
orderid: (width: 6rem, color: gray),
date: (width: 9rem),
items: (width: 20rem)
));
Это генерирует что-то вроде этого:
.mat-column-orderid[_ngcontent-c15] {
flex: 6rem;
min-width: 6rem;
color: gray; }
.mat-column-date[_ngcontent-c15] {
flex: 9rem;
min-width: 9rem; }
В этой версии width
становится flex: value; min-width: value
.
Для вашего конкретного примера вы можете добавить wrap: true
или что-то подобное в качестве нового параметра.