由于无法读取未定义 angular 的 属性 'key' 而出现错误

Question

我的以下代码出现错误

错误

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

Answer 1

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

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

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

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

Answer 2

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

您可以将当前值传递为：

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