如何将颜色代码转换为实际颜色

Question

我在我的项目中使用 Angular material 和 Angular6。我想要做的是将存储在数据库中的颜色代码转换为我 mat-table.

中的实际颜色

目前，我的table如下，

这就是我从 component.ts 文件中获取可见列数据的方式，

getIssueCategory() {
  this.IssueService.getAllIssueCategories().subscribe(result => {
      this.issueCategoryDTOList = result.reverse();

      //updating data source
      this.updatingDataSource(result);

      this.IssueService.issueCategoryDTOList = result;
    }
  );
}

get visibleColumns() {
  return this.displayedColumns.filter(column => column.visible).map(column => column.property);
}

applyFilter(filterValue: string) {
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

我的HTML文件中的颜色栏如下，

<!-- color Column -->
    <ng-container matColumnDef="color">
      <mat-header-cell *matHeaderCellDef mat-sort-header="color" style="max-width: 25%; min-width: 25%;">COLOR
      </mat-header-cell>
      <mat-cell *matCellDef="let element" style="text-transform: uppercase; max-width: 25%; min-width: 25%;">
        {{element.color}}
      </mat-cell>
    </ng-container>

最后，为了更容易理解，我使用 photoshop 设计了预期的输出，

PS: 在我的数据库中，颜色存储为颜色代码。

Answer 1

你可以简单地做一些像 -

<!-- color Column -->
<ng-container matColumnDef="color">
   <mat-header-cell *matHeaderCellDef mat-sort-header="color" style="max-width: 25%; min-width: 25%;">COLOR
   </mat-header-cell>
   <mat-cell *matCellDef="let element" style="text-transform: uppercase; max-width: 25%; min-width: 25%;">
     <div style="width: 15px; height: 15px" [style.background-color]="element.color">/div>
   </mat-cell>
</ng-container>

或者更好的方法是将它变成一个组件

@Component({
  selector: 'app-color-swatch',
  template: `<div [style.background-color]="colorCode"></div>`,
  styles: ['div { height: 15px; width: 15px }']
})
export class ColorSwatchComponent {

  @Input colorCode: string;

}

然后 -

<app-color-swatch [color]="element.color"></app-color-swatch>

Answer 2

试试这个：

<input matInput type="color" value="color from Database">

示例：

<input matInput type="color" value="#904A91">

Answer 3

您需要做的就是使用 css 创建一个正方形并将您的 color 动态应用到元素作为 background-color

在 table 中显示颜色的位置，添加一个 div，我们将使用 css 将其样式设置为正方形。然后像下面这样设置背景颜色。

<ng-container matColumnDef="color">
  <mat-header-cell *matHeaderCellDef mat-sort-header="color" style="max-width: 25%; min-width: 25%;">COLOR</mat-header-cell>
  <mat-cell *matCellDef="let element">
    <div class="square" [style.background-color]="element.color">
    </div>
  </mat-cell>
</ng-container>

在你的css

.square {
  /* Specify the dimensions of your square here */
  height: 25px;
  width: 25px;
}

如何将颜色代码转换为实际颜色

How to convert color code into actual color

css

uitableview

angular

mat-table