如何修复 Angular 中不存在的属性

Question

所以我正在处理现有的代码库，我正在尝试制作 mat-form 文件以获取写入 mam-chart.model.ts 文件的 TextData，但由于某种原因我收到此错误“错误类型错误：无法读取未定义“”的属性“文本”。我

任何建议或帮助将不胜感激

design.ts

import { Chart, TextData, ChartData} from 'src/app/mam-chart/models';
export class ChartDesignComponent implements OnInit {
 chart: Chart;
 chartData: ChartData;
}

设计.html

            <mat-form-field appearance="fill">
                <mat-label>Text</mat-label>
                <input matInput  [(ngModel)]="chartData.textData.text" />
            </mat-form-field >

            <mat-form-field appearance="fill">
                <mat-label>Color(# + hex color code)</mat-label>
                <input matInput [(ngModel)]="chartData.textData.color"/>
            </mat-form-field >

mam-chart.model.ts

export class Chart {
    id: number;
    chartType: ChartType = ChartType.chart;
    version: number = 2;
    dataType: ChartDataType = ChartDataType.static;
    template: ChartTemplate;

    .........

}
export class TextCard extends Chart {
    public chartData: CardDataChart;

    constructor(json?: any) {
        super(json)
        if (json == null) {
            return;
        }
        this.chartData = new ChartData(json.chartData);
    }
}


export class TextData {
    public text:  string;
    public color:  string;
    public size: string;
    public sizePx: number;

    constructor(json?: any) {
        if (json == null) {
            this.text = "";
            this.color = "";
            this.size = "";
            this.sizePx = 20;
            return;
        }
       ......

export class ChartData {
    filteredData: FilteredData[];
    figures: Figure[];
    textData: TextData;
}

Answer 1

您的图表类也没有属性 chartData 和 textData... 试试看[(ngModel)]="chartData.textData.color"