Question

我在我的项目中将Angular材质与Angular6一起使用。我想做的就是将存储在数据库中的颜色代码转换为mat-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

您可以简单地执行--

SELECT id, Code, Company
FROM table main
WHERE
(
    main. Company = '***'
    AND NOT EXISTS (
        SELECT code
        FROM table sub
        WHERE main.code = sub.code
        AND main.id != sub.id
    )
) OR company != '***'

或者也许更好的方法是将其变成组件

<!-- 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;

}

Answer 2

尝试一下：

s1 = ip.merge(cusipmap.rename(columns={'CUSIP':'instrument'}),on='instrument',how='left')['ID']
s2 = ip.merge(isinmap.rename(columns={'ISIN':'instrument'}),on='instrument',how='left')['ID']

ip['Id'] = s1.combine_first(s2)
print (ip)
  instrument CUSIP ISIN  Id
0          a   US1  NaN  a1
1          b   NaN  EU1  b1
2          c   US2  NaN  c1

示例：

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

Answer 3

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

代替在表格中显示颜色的位置，添加一个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>

在您的CSSs

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

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

3 个答案: