Question

当前，我的html中有一个select元素，该元素具有对象details的ngModel：

[ngModel]="details?.publicInformation?.firstname"

但是，publicInformation可能不存在于该对象中，或者如果存在，则可能firstname不存在。无论如何，最后，我要创建以下内容：

[ngModel]="details?.publicInformation?.firstname" (ngModelChange)="details['publicInformation']['firstname'] = $event"

基本上，如果触发了选择，即使publicInformation和firstname都不存在，我也想在details内创建它们并存储选择的值。

问题是我得到

Cannot set property 'firstname' of undefined

有人可以在这里解释我做错了什么，如何获得想要的结果？

Answer 1

加载表单数据时应该这样做。

例如，您可能会有类似的内容：

ngOnInit() {
    this._someService.loadForm().then((formData: FormData) => {
        this.details = formData;
    });
}

然后，您可以对其进行修改以填充所需的缺少的空属性：

ngOnInit() {
    this._someService.loadForm().then((formData: FormData) => {
        this.details = formData || {};

        if (!this.details.publicInformation) {
            this.details.publicInformation = { firstname: '' };
        } else if (!this.details.publicInformation.firstname) {
            this.details.publicInformation.firstname = '';
        }
    });
}

但是，最好将此逻辑放置在服务中，以便它们负责将所有必需的空属性添加到所加载的数据中，或者，如果您使用的是Redux，则应将其放入化简器中。

Answer 2

您需要初始化details和publicInformation来清空对象

public details = {publicInformation : {}};

Angular-在对象的新属性中创建属性

2 个答案: