0

我已禁用表中的几列，并希望以不同的颜色显示它们。因此，我在 Typescript 中编写了一个函数，其中 CSS 通过类 .disabledRange 进行更改。我读过你可以用 [ngClass] 解决它...我有一个包含三列的数组：第一、第二、第三。如何使列禁用并仍然以不同的颜色设置它们的样式？就我而言，我不知道如何以最有用的方式使用它。我会很感激帮助:)

我的代码：

// Template
<td mat-cell *matCellDef [class.disabledRange]="column.disabledRange">
...
</td>

// Array
private displayedColumns: EditColumns[] = [
    { attribute: 'first', name: 'MyFirstCol', object: null, disabledRange: false },
    { attribute: 'second', name: 'MySecondCol', object: null, disabledRange: false },
    { attribute: 'third', name: 'MyThirdCol', object: null, disabledRange: false }

  ];

// Set columns disabled
  private disabledColumns(attributeName: string) {
    if (attributeName) {
      const displayedColumn = this.displayedColumns.find((c) => c.attribute === first);
      if (displayedColumn) {
        displayedColumn.disabledRange = !displayedColumn.disabledRange;
        const columnIndex = this.columns.findIndex((c) => c === attributeName);

      }
    }

ngAfterViewInit() {
    // To disabled columns   
    this.disabledColumns('first');
    this.disabledColumns('second');
    this.disabledColumns('third');
  }

// Style
// When ranges are disabled in the data table
.disabledRange {
  background-color: #eae9e9;
  color: #000000;
}
4

1 回答 1

1

您可以一起使用 [class.disabledRange]="condition" 和 [ngClass]，例如，如果您有类似的

.col0,.col1,.col2,.col3
{
  padding-left: .5rem
}
.col0
{
  background-color: silver
}
.col1
{
  background-color: yellow
}
.col2
{
  background-color: red;
  color:white;
}

您可以使用

<ng-container *ngFor="let col of defColumns;let i=index" [matColumnDef]="col.name">
    <th mat-header-cell *matHeaderCellDef [class.disabledRange]="col.disabledRange" [ngClass]="'col'+i">{{col.attribute}}  </th>
    <td mat-cell *matCellDef="let element" [class.disabledRange]="col.disabledRange" [ngClass]="'col'+i"  > {{element[col.name]}} </td>
  </ng-container>

请参阅stackblitz，有关 ngClass 的更多信息，请参阅文档

如果我们可以更改行的“类”，则更新我们可以使用标签“tr mat-row.

想象一些数据，例如：

[
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H',class:"col0"},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He',class:"col1"},
]

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="row.class"></tr>

当然我们也可以改变td .，我们需要使用“行的一些变量”。我们可以拥有我们的“数据”的属性，

你可以写

<td mat-cell *matCellDef="let element"
   [class.disabledRange]="col.disabledRange" 
   [ngClass]="element.class"> {{element[col.name]}} </td>

我们也可以使用“行的索引”，例如

<!--see the "let row=index"-->
<td mat-cell *matCellDef="let element;let row=index" 
    [class.disabledRange]="col.disabledRange" 
    [ngClass]="'col'+(row%4)"  > {{element[col.name]}} </td>

注意：如果只想改变背景，我们可以使用

  [style.background-color]="....."
于 2020-05-13T12:10:28.340 回答