使用 Angular 中的嵌套对象将其与 Ngmodel 连接

Question

person.model.ts 页；

export class Person {
    name: string;
    email: string;
    desc: string;
    adres: Address;
}

export class Address {
    city: string;
    disticy: string;
    postCode: number;
    country: string;
}

person.component.html 页；

...

<div class="bg-secondary container"> {{ jsonPerson }} </div>

...

<input [(ngModel)]="newPerson.adres.city" name="city" type="text" id="city" placeholder="Şehir" class="form-control">

...

form.component.ts 页；

...

public newPerson: Person = new Person();

get jsonPerson() {
  return JSON.stringify(this.newPerson) 
}

...

问题是；我想使用我的地址信息作为对象。这就是我使用它的方式。但是，当我以 [(ngModel)]="newPerson.address.city" 的形式绑定到我的 html 页面时，出现错误。也就是如何到达Person对象内部的Address对象并获得成功的输出。

信息：person.model.ts不是我的数据源。我通过 person.service.ts 将我的数据分发到必要的页面。所以没有数据库

Answer 1

您需要对其进行初始化。

export class Person {
    adres: Address = new Address();
}

或

export class Person {
    adres: Address;
    constructor() {
      this.adres = new Address();
    }
}

Answer 2

@Furkan 请记住：

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in a future version of Angular.

现已弃用： <input [formControl]="control" [(ngModel)]="value">

https://angular.io/guide/deprecations#ngmodel-reactive

使用 Angular 中的嵌套对象将其与 Ngmodel 连接

Connecting it with Ngmodel using nested objects in Angular

javascript

angular

angular-ngmodel