如何修复无法读取 Angular 中的属性答案

【问题标题】：how to fix cannot read property in Angular如何修复无法读取 Angular 中的属性
【发布时间】：2020-09-17 07:15:47
【问题描述】：

所以我正在处理现有的代码库，我正在尝试制作 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;
}

【问题讨论】：

这通常是因为之前的值是未定义的。在这种情况下，它是textData。你能添加这个错误的回溯吗？
@ngShravil.py 我不确定如何回溯，因为当我尝试在 HTML 中添加此 [(ngModel)]="chartData.textData.text" 时出现此错误。我上传了错误的图片，所以你能看看它吗？谢谢
你在哪里初始化 chartData 在 design.ts 以及如何？

标签： html angular typescript angular-material

【解决方案1】：

这可能是因为“chartData”最初在页面加载时未定义。如果您稍微修改 html 以在 chartData 实际存在时链接 ngModel chartData.textData.text，您可能会解决此错误并获得适当的结果；或将 chartData 初始化为所需类型的对象。

代码：

       <div *ngIf="chartData && chartData.textData">
       <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 >
        </div>

现在表单字段只有在 chartData 对象有一个键 'textData' 时才可见

【讨论】：

嗨...我不认为我真的明白了，所以请你帮忙怎么做？。