Question

在表单上提交正在重新填充到表单中的数据时，错误ERROR TypeError: Cannot read property 'id' of undefined

对<select [(ngModel)]="insurer.group.id" name="group" id="group">的敬意

模板

<form #insurerForm="ngForm" (ngSubmit)="save(insurerForm)">
    {{insurer|json}}

    <select [(ngModel)]="insurer.group.id" name="group" id="group">
        <option *ngFor="let group of groups" 
                [value]="group.id"
                [selected]="insurer.group ? insurer.group.id === group.id : null">
            {{group.name}}
        </option>
    </select>
    <button type="submit" class="dd_button">Save</button>
</form>

保险人对象

{
  "is_admin": null,
  "type": "insurer",
  "group": {
    "id": 13,
    "email": null,
    "name": "Generic"
  }
  ...
}

组件

export class InsurerDetailsComponent implements OnInit {

    constructor(
        private route: ActivatedRoute,
        private apiService: ApiService,
        private location: Location
    ) { }

    ngOnInit(): void {
        this.getInsurer();
    }

    groups: Group[];
    insurer: Insurer;

    getInsurer(): void {
        const id = +this.route.snapshot.paramMap.get('id');
        this.apiService.getOne(id, 'insurer', 'group').subscribe(insurer => {
            this.insurer = insurer;
        });
        this.apiService.getMany('group').subscribe(groups => 
        {
            this.groups = groups
        });
    }

    save(form: NgForm): void {
        console.log('trying to save data: ', this.insurer);
        console.log('form save data: ', form.value);

        // this.apiService.update('insurer', this.insurer.id, form.value).subscribe(insurer => this.insurer = insurer);
    }

}

我在假设表单试图使用提交时发送的表单数据重新填充时遇到问题。问题在于ngModel试图监听不存在的insurer.group.id。我尝试将ngModel更改为[(ngModel)]="group.id"和[(ngModel)]="group"，但问题是在初始页面加载时未填充它。

我尝试转储保险人对象，以查看问题来自{{insurer|json}}的来源，但保存后似乎没有改变。因此，不确定如何使用正确的数据进行调试。

还尝试覆盖保险公司的对象值，希望它能反映在下面的代码中。

save(form: NgForm): void {
    this.insurer.group.id = form.value.group;
}

我不知道该如何解决该错误并保持加载数据。将[(ngModel)]="insurer.group.id"更改为[(ngModel)]="group"可以修复错误，但是即使我更改了value属性来反映该错误，数据也没有设置为加载状态。

Answer 1

一种方法是，您像这样用Insurer即时初始化insurer操作

 insurer: Insurer = new Insurer() ; // this related to your implimentation

或

 insurer: Insurer = {group:{id:1}};

* ngIf

使用* ngIf并在insurer初始化时显示表单元素

<form #insurerForm="ngForm" (ngSubmit)="save(insurerForm)" *ngIf="insurer && insurer.group">
    {{insurer|json}}

    <select [(ngModel)]="insurer.group.id" name="group" id="group">
        <option *ngFor="let group of groups" 
                [value]="group.id">
            {{group.name}}
        </option>
    </select>
    <button type="submit" class="dd_button">Save</button>
</form>

您无需处理标记选定的选项，ngModel会为您[selected]="insurer.group ? insurer.group.id === group.id : null">

stackblitz demo

使用ngFor

1 个答案: