getting error as Cannot read property 'key' of undefined angular

Question

I am getting error for my below code

error

TypeError: Cannot read property 'key' of undefined at EditorComponent.push.xD4D.EditorComponent.setFillColor (editor.component.ts:634)

ts

    setFillColor(swatch: any): void {
    this.palettes.selected = swatch;
    this.props.fill = swatch.key;
    this.setFill();
    if (!this.props.canvasImage) {
        console.log('say hi')
        this.canvas.backgroundColor = this.props.canvasFill;
        this.canvas.renderAll(); 
    };
}

Here is my HTML code

        <input type="text" class="form-control" [cpPosition]="'right'" [cpPresetColors]="customColors" [cpOKButton]="true" [cpAddColorButtonText]="'Speichern'" [cpAddColorButton]="true" [cpOKButtonClass]="'btn btn-light btn-sm'" [cpSaveClickOutside]="false" [(colorPicker)]="props.canvasFill"
           [style.background]="props.canvasFill" [value]="props.canvasFill" (cpPresetColorsChange)="updateColorPresets($event)"
           (colorPickerChange)="setFillColor()"/>

In your html `(colorPickerChange)="setFillColor(p)`. What's `p` in that case? — Fussel, Mar 07 '21 at 14:02

score 1 · Accepted Answer · answered Mar 07 '21 at 14:07

1

Check your input data like:

setFillColor(swatch: any): void {
  if (!swatch) {
    debugger
  }

And see call stack in dev tools.

By some of the case your function got "undefined" as argument. You should define reason why it happens and maybe write code to process this case.

answered Mar 07 '21 at 14:07

Oleg Postoev

182
1
5

I tried like this setFillColor(swatch: any): void { if(!swatch){ this.palettes.selected = swatch; this.props.fill = swatch.key; this.setFill(); } else if(!this.props.canvasImage){ console.log('say hi') this.canvas.backgroundColor = this.props.canvasFill; this.canvas.renderAll(); } } still getting same error – Mr.M Mar 07 '21 at 14:14
This code not should fix error, you still try get value from key of undefined – Oleg Postoev Mar 07 '21 at 14:20
i changed my html like OP but i got this error Cannot read property 'value' of undefined at EditorComponent_div_50_Template_input_colorPickerChange_4_listener – Mr.M Mar 07 '21 at 14:22

score 1 · Answer 2 · answered Mar 07 '21 at 14:16

1

It's because you are not passing any value to method setFillColor from your HTML code.

You can pass current value as :

(colorPickerChange)="setFillColor($event.target.value)"

answered Mar 07 '21 at 14:16

Naresh J

2,087
5
26
39

Thanks Naresh Now I am getting this error Cannot read property 'value' of undefined at EditorComponent_div_50_Template_input_colorPickerChange_4_listener – Mr.M Mar 07 '21 at 14:18
try with `(colorPickerChange)="setFillColor($event.currentTarget.value)"` – Naresh J Mar 07 '21 at 14:26
I modified like this (colorPickerChange)="setFillColor($event.currentTarget.value)" – Mr.M Mar 07 '21 at 14:28
just pass $event in method, and put debugger in your method definition and check which value you are getting. – Naresh J Mar 07 '21 at 14:29
as you told i put event there and i put debug in the code setFillColor(swatch: any): void { 'swatch = #323232' this.palettes.selected = swatch; swatch = #323232' this.props.fill = swatch.key; props is getting undefined and swatch getting the color value and key is undefined this.canvas.backgroundColor = this.props.canvasFill here I am getting the color value for canvasFill Partially worked – Mr.M Mar 07 '21 at 14:39
actually what i want is if i selected shape the color has to change but with current code it is changing both background and shape color – Mr.M Mar 07 '21 at 14:43
setFillColor(swatch: any): void { this.palettes.selected = swatch; this.props.fill = swatch.key; this.setFill(); if (!this.props.canvasImage) { console.log('say hi') this.canvas.backgroundColor = this.props.canvasFill; this.canvas.renderAll(); }; } partially worked thanks when i select shape or when i select the text that particular object has to change the color – Mr.M Mar 07 '21 at 14:44
can you please help on this question https://stackoverflow.com/questions/66518906/issue-fabric-js-applying-background-color-for-shapes-and-background-angular – Mr.M Mar 07 '21 at 16:54

getting error as Cannot read property 'key' of undefined angular

2 Answers2