无法读取角度形式未定义的属性“ street”

时间:2018-11-06 14:12:27

标签: angular typescript angular-forms

我只是用spring boot尝试用angular6。我只想使用嵌套类。这是我的类。但是我无法筛选用户。我收到此错误。您能帮我吗?

 export  class Address {

street: string;
    suite: string;
  city: string;
 zipcode: string;


}
    import {Address} from './address';


    export class User {

     id: number;
     name: string;
     email: string;
     address: Address;
     phone: string;
     website: string;

    }

这是我的html代码

 <form (ngSubmit)="onSubmit()" >
    <div class="form-group">
      <label for="id">User Id</label>
      <input type="text"   class="form-control"  id="id"   required [(ngModel)]="users.id" name="id">

    </div>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text"  class="form-control"  id="name"  required [(ngModel)]="users.name" name="name">
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email"  class="form-control"  id="email" required [(ngModel)]="users.email"  name="email">
    </div>

    <div class="form-group">
      <label for ="street"  >Address street</label>
      <input  type="text"  class="form-control" id="street"  required [(ngModel)]="users.address.street"  name="street">
    </div>

2 个答案:

答案 0 :(得分:0)

在课堂上,请确保您也将地址设为实际实例。默认情况下,地址是未定义的。您可以在构造函数中进行操作,例如以下示例:

 export class User {

  constructor() {
    this.address = new Address()
  }

  id: number;
  name: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
}

希望有帮助!

答案 1 :(得分:0)

您应该在Component Class上定义一个users属性,以使这项工作有效:

import { Component } from '@angular/core';

@Component({...})
export class YourComponent  {
  users = {
    id: '',
    address: {}
  };
}

这是您推荐的Sample StackBlitz