如何使用字符串（十六进制格式）初始化 @angular-material-components/color-picker 边的 .ts

Question

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

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

我有弹出式白色 enter image description here

Answer 1

首先，您需要将颜色转换为 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);
}

Answer 2

好的谢谢

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

如何使用字符串（十六进制格式）初始化 @angular-material-components/color-picker 边的 .ts

how to initialize a @angular-material-components/color-picker side .ts with string (fomat hex)

color-picker

angular

angular10