Angular 类型脚本TS2532:对象可能是'；未定义'；双向绑定

我正在尝试在“用户”变量和html模板中的表单之间进行双向绑定：

export class UsersComponent implements OnInit {

  user: User = {
    firstname: '',
    lastname: '',
    age: 0,
    adress: {
      street: '',
      city: '',
      state: ''
    }
  };
  ...

表单示例：（我不想粘贴太多代码）

但当我尝试user.address.street、user.address.city或user.address.state id时，不会编译 例如：

          [(ngModel)]="user.age" //works

          [(ngModel)]="user.adress.street" //does not work

但是当我转到用户界面并单击save时：编译工作正常

export interface User{

    firstname: string;
    lastname: string;
    age?: number;

    adress?: {
        street?: string,
        city?: string,
        state?: string
    }

    active?: boolean;
    registered?: any;
    hide?: boolean;
}

当我编辑ts或html文件并保存时：它会给我一个编译错误：

Failed to compile.

src/app/components/users/users.component.html:39:36 - error TS2532: Object is possibly 'undefined'.

39           [(ngModel)]="user.adress.street"
                                      ~~~~~~

  src/app/components/users/users.component.ts:7:16
    7   templateUrl: './users.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UsersComponent.

我试着用

user?.adress?.street

---

但它不起作用

角度绑定主要作用于预定义类型（字符串、数字、任意）或我们显式声明的类型，如接口。现在在上面提到的代码中，类级别变量没有正确声明，它必须是“any”类型或any接口。请使用下面提到的链接进行验证

---

角度绑定主要用于预定义类型（字符串、数字、任意）或我们显式声明的类型，如接口。现在在上面提到的代码中，类级别变量没有正确声明，它必须是“any”类型或any接口。请使用下面提到的链接进行验证

---

我修复了它，有一个转折点：

而不是使用user.address.street

我在组件中创建了一个变量“adress”

---

在模板中，我使用了address.street

我修复了它，并做了一个转向：

而不是使用user.address.street

我在组件中创建了一个变量“adress”

在模板中，我在组件中使用了address.street

  user = new User("", "", 0, {
    street: "Test",
    city: "",
    state: ""
  });

---

然后创建一个类似以下的类：

export class User {
  firstname: string;
  lastname: string;
  age?: number;

  adress: {
    street?: string;
    city?: string;
    state?: string;
  };

  active?: boolean;
  registered?: any;
  hide?: boolean;
  constructor(firstname, lastname, age, adress) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
    this.adress = adress;
  }
}

---

最后，您的Html模板应该是：

<div class="form-group">
  <label for="street">Street Adress</label>
  <input
          type="text"
          class="form-control"
          [(ngModel)]="user.adress.street"
          name="street"
        />
</div>

街道地址

---

在您的组件中。ts：

  user = new User("", "", 0, {
    street: "Test",
    city: "",
    state: ""
  });

---

然后创建一个类似以下的类：

export class User {
  firstname: string;
  lastname: string;
  age?: number;

  adress: {
    street?: string;
    city?: string;
    state?: string;
  };

  active?: boolean;
  registered?: any;
  hide?: boolean;
  constructor(firstname, lastname, age, adress) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
    this.adress = adress;
  }
}

---

最后，您的Html模板应该是：

<div class="form-group">
  <label for="street">Street Adress</label>
  <input
          type="text"
          class="form-control"
          [(ngModel)]="user.adress.street"
          name="street"
        />
</div>

街道地址

---

---

如果您提供了一个不存在的属性，您希望看到什么行为？您可以检查这个问题：在您的TS代码中，潜在的空值受可选链接保护，但HTML代码不受保护。试着使用

[（ngModel）]=“user？.address？.street”

试试这个：如果你提供了一个不存在的属性，你会期望什么行为？你可以检查这个问题：在你的TS代码中，潜在的空值是用可选的链接保护的，而不是你的HTML代码。尝试使用

[（ngModel）]=“user？.address？.street”

试试这个：