时间戳

首页 > 解决方案 > typescript TS2532：对象可能在双向绑定角度中“未定义”

angular - typescript TS2532：对象可能在双向绑定角度中“未定义”

问题描述

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

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>
 ...

当我绑定 user.firstname、user.lastname 或 user.age 时，它​​可以工作：示例：

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

但是当我尝试 user.adress.street、user.adress.city 或 user.adress.state 时，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

但它没有用

标签： angulartypescript

解决方案

另一种解决方案是使用 *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>

我希望它可以帮助你

推荐阅读