angular - typescript TS2532 : Object is possibly 'undefined' in two-way binding angular

Question

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

export class UsersComponent implements OnInit {

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

表单示例:(我不想粘贴很多代码)

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

当我绑定(bind) user.firstname、user.lastname 或 user.age 时，它​​起作用了:示例:

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

但是当我尝试 user.adress.street、user.adress.city 或 user.adress.state id 时，id 无法编译示例:

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

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

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

但是没有成功

Answer 1

另一种解决方案是使用 *ngIf="user.adress.street"检查对象的内容，在这种情况下，angular 将等待此对象被填充。

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

如果您的对象有很多字段，可能很难在 HTML 上的所有对象中都这样做。在这种情况下，您可以使用 *ngIf 创建一个 div 并将内容放入其中。

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

希望对你有帮助