1

我尝试将十六进制字符串转换为颜色（@angular-material-components/color-picker 的导入）或实例化颜色并从侧面.ts 将我的值 hex stock 设置为我的数据库

<!-- begin snippet: js hide: false console: true babel: false -->
mat-form-field>
                              <input matInput [ngxMatColorPicker]="picker" formControlName="color" [style.background-color]="getfCAll(ri)"  [disabled]="disabled">
                              <ngx-mat-color-toggle matSuffix [for]="picker"></ngx-mat-color-toggle>
                              <ngx-mat-color-picker #picker [touchUi]="touchUi" [color]="color"></ngx-mat-color-picker>
                            </mat-form-field>

createPriority(p): FormGroup {
    return this.formBuilder.group({
      name: [p.name, Validators.compose([Validators.required])],
      color: [p.color, Validators.compose([Validators.required])]
    });
  }


core.js:4081 ERROR TypeError: c.toHexString is not a function
    at NgxMatColorCollectionComponent.set color [as color] (angular-material-components-color-picker.js:810)
    at setInputsForProperty (core.js:8657)
    at elementPropertyInternal (core.js:7703)
    at Module.ɵɵproperty (core.js:13791)
    at NgxMatColorPaletteComponent_Template (angular-material-components-color-picker.js:421)
    at executeTemplate (core.js:7329)
    at refreshView (core.js:7198)
    at refreshComponent (core.js:8335)
    at refreshChildComponents (core.js:6991)
    at refreshView (core.js:7248)
我在这里弹出白色 输入图像描述

4

2 回答 2

4

首先，您需要将颜色转换为 RGB，您可以使用此方法：

hexToRgb(hex) {
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, (m, r, g, b) => {
    return r + r + g + g + b + b;
  });
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

那么你需要获取一个 NgxMatColorPickerInput 的实例

import { NgxMatColorPickerInput, Color } from '@angular-material-components/color-picker';

...

@ViewChild(NgxMatColorPickerInput) pickerInput: NgxMatColorPickerInput;

现在您可以像这样轻松设置值

ngAfterViewInit(): void {
  const temp = this.hexToRgb('#00ff00');
  this.pickerInput.value = new Color(temp.r, temp.g, temp.b);
}
于 2020-07-30T07:01:42.760 回答
0

好，谢谢

createPriority(p): FormGroup {
    let rgb = this.hexToRgb(p.color)
    return this.formBuilder.group({
      name: [p.name, Validators.compose([Validators.required,Validators.maxLength(25)])],
      color: [new Color(rgb.r,rgb.g,rgb.b,1), Validators.compose([Validators.required])]
    });
  }
  
  hexToRgb(hex) {
    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
      return r + r + g + g + b + b;
    });
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }

于 2020-07-30T12:33:45.787 回答