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

【问题标题】：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)

    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 是什么？
我已经删除了我刚刚检查的添加参数

标签： angular typescript angular8 fabricjs angular11

【解决方案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 的颜色值部分工作