html - 将正方形插入 mat-table - Angular

Question

我对 mat-table 有疑问。我需要将正方形插入单元格，但我不知道。

现在这是我的代码。

<div class="my_item">
        <div><span class="skuska"><span class="mat-subheading-2">Január</span></span></div>
        <mat-table #table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </div>

这是正在运行的代码……我在表格中只有文本，我需要添加带有数字的方 block 而不是文本。

我的运行代码:

我只有带正方形的表格的图片示例

带正方形的表格:

你能帮帮我吗？

非常感谢!

现在我有了 ->

HTML文件

 <div class="my_item">
        <div><span class="skuska"><span class="mat-subheading-2">Apríl</span></span></div>
        <mat-table #table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.background-color] = "element.color"> {{element[column.id]}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </div>

.ts文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';


@Component({
  selector: 'app-harmonogram',
  templateUrl: './harmonogram.component.html',
  styleUrls: ['./harmonogram.component.css']
})
export class HarmonogramComponent implements OnInit {

  dataSource;
  displayedColumns = [];
  @ViewChild(MatSort) sort: MatSort;

  /**
   * Pre-defined columns list for user table
   */
  columnNames = [{
    id: "po",
    value: "po"

  }, {
    id: "ut",
    value: "ut"
  }, {
    id: "st",
    value: "st"
  }, {
    id: "stv",
    value: "št"
  }, {
    id: "pi",
    value: "pi"
  }, {
    id: "so",
    value: "so"
  }, {
    id: "ne",
    value: "ne"
  }];

  ngOnInit() {
    this.displayedColumns = this.columnNames.map(x => x.id);
    this.createTable();
  }

  createTable() {
    let tableArr: Element[] =
      [
        { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'black'},
      { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'green'},
      { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'grey'},
      { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'blue'},
        { po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'green'}
      ];
    this.dataSource = new MatTableDataSource(tableArr);
    this.dataSource.sort = this.sort;
  }
}

export interface Element {
  po: string,
  ut: string,
  st: string,
  stv: string,
  pi: string,
  so: string,
  ne: string,
  color: string,
}

这是 .css 文件的一部分

.mat-cell{

  height: 26px;
  width: 26px;
  display: inline-flex;
  border-left: 4px solid white;
  padding-left: 0px;
}

我只能更改行颜色..但我需要更改特定的单元格，例如值为“8”(现在单元格的数量不可见)

Answer 1

在 CSS 中使用它:

参见此处:https://stackblitz.com/edit/angular-d2yrwq-yfwgrf?file=app/table-basic-example.css

.mat-cell{
    background-color: green;
    min-height: 26px;
    border-left: 4px solid white;
    padding-left: 9px;
}
.mat-cell:last-child{
     background: linear-gradient(90deg, green 50%, white 50%);
}

对于动态 background-color 使用 [style.backgound]="YourColor"

如果它是 last-child(表示 element[column.id]='ne')，则使用 [style.backgound]="linear-gradient (90 度，50%，YourColor 白色 50%)”

看这里:https://stackblitz.com/edit/angular-d2yrwq-bdnuwy?file=app/table-basic-example.html