由于无法读取未定义角度的属性“键”而出现错误

Posted 2023-03-25

【中文标题】由于无法读取未定义角度的属性“键”而出现错误

【英文标题】：getting error as Cannot read property 'key' of undefined angular

【发布时间】：2021-06-05 14:16:52

【问题描述】：

下面的代码出错了

错误

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(); 
    ;

这是我的 html 代码

        <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()"/> 

【问题讨论】：

在您的 html 中 (colorPickerChange)="setFillColor(p)。在这种情况下，p 是什么？

我已经删除了我刚刚检查的添加参数

【参考方案1】：

检查您的输入数据，例如：

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

并在开发工具中查看调用堆栈。

在某些情况下，您的函数将“未定义”作为参数。您应该定义它发生的原因，并可能编写代码来处理这种情况。

【讨论】：

我试过这样 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(); 仍然出现同样的错误

这段代码不应该修复错误，你仍然尝试从未定义的键中获取值

我像 OP 一样更改了我的 html，但出现此错误无法读取 EditorComponent_div_50_Template_input_colorPickerChange_4_listener 处未定义的属性“值”

【参考方案2】：

这是因为您没有从 HTML 代码向方法 setFillColor 传递任何值。

您可以将当前值传递为：

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

【讨论】：

感谢 Naresh 现在我收到此错误无法读取 EditorComponent_div_50_Template_input_colorPickerChange_4_listener 处未定义的属性“值”

试试(colorPickerChange)="setFillColor($event.currentTarget.value)"

我是这样修改的 (colorPickerChange)="setFillColor($event.currentTarget.value)"

只需在方法中传递 $event，然后将调试器放入您的方法定义中并检查您得到的值。

正如你所说，我把事件放在那里，我把调试放在代码中 setFillColor(swatch: any): void 'swatch = #323232' this.palettes.selected = swatch;样本 = #323232' this.props.fill = 样本.key;道具变得未定义，样本获取颜色值和键未定义 this.canvas.backgroundColor = this.props.canvasFill 在这里我正在获取 canvasFill 的颜色值部分工作