错误类型错误：_co.userData在angular 7中未定义，当我尝试对值使用属性绑定时

我知道像这样的问题已经被问过了，但我没有得到任何好的结果。我搜索了很多关于这个，但没有得到任何运气，这就是为什么我张贴这个

当我尝试使用属性绑定的变量在输入字段中显示值时，出现错误。

ERROR TypeError: _co.userData is undefined

组件。ts

export class PlaceOrderComponent implements OnInit {

  userData: User
  orderSummary: any
  total: number

  constructor(private userServ: UserService, private cartServ: CartService) { }

  ngOnInit() {

    this.userServ.getUserData();
    this.userServ.userData.subscribe(
      (data: any) => {
        this.userData = data;
        this.userServ.getOrderSummary(this.userData.id).subscribe(
          res => { this.orderSummary = res.message[0]},
          err => console.log(err)
        )

        this.cartServ.getCartTotal(this.userData.id).subscribe(
          res => {this.total = res.message[0][0].total},
          err => console.log(err)
        )
        console.log(this.userData)
      }
    )
  }

}

component.html

<form 
          #form="ngForm" (ngSubmit)="onSubmit(form.value)">
            <h5>Shipping Address</h5>
            <div class="form-row">
              <div class="form-group col-md-6">
                <input 
                type="text" 
                class="form-control"
                [value]="userData.firstName"
                ngModel
                name="firstName"
                required
                #firstName="ngModel">
                <span
                style="color: red" 
                *ngIf="!firstName.valid && firstName.touched">Required</span>
              </div>
              <div class="form-group col-md-6">
                <input 
                type="text" 
                class="form-control"
                ngModel
                name="lastName"
                required
                #lastName="ngModel">
                <span
                style="color: red" 
                *ngIf="!lastName.valid && lastName.touched">Required</span>
              </div>
            </div>
            <div class="form-group">
              <input 
              type="email" 
              class="form-control"
              ngModel
              name="emailAddress"
              email
              required
              #emailAddress="ngModel">
              <span
              style="color: red" 
              *ngIf="!emailAddress.valid && emailAddress.touched">Required</span>
            </div>
            <div class="form-group">
              <label for="contact">Contact</label>
              <input 
              type="text" 
              class="form-control"
              ngModel
              name="contact"
              required
              #contact="ngModel">
              <span
              style="color: red" 
              *ngIf="!contact.valid && contact.touched">Required</span>
            </div>
            <div class="form-group">
                <div class="form-group">
                    <textarea 
                    class="form-control" 
                    id="exampleFormControlTextarea1" 
                    rows="3"
                    ngModel
                    required
                    name="address"
                    #address="ngModel"></textarea>
                    <span
                    style="color: red" 
                    *ngIf="!address.valid && address.touched">Required</span>
                  </div>
              </div>
            <button 
            type="submit" 
            class="btn btn-primary placeorder-btn"
            [disabled]="!form.valid">Place Order</button>
          </form>

送货地址
要求的
要求的
要求的
接触
要求的
要求的
下单

我正在使用模板驱动程序表单，可能还有其他方法可以使用变量在输入字段中显示值

我还尝试使用

双向绑定[（ngModel）]=“userData.firstName”

，但仍然得到相同的错误

所以请告诉我我做错了什么

谢谢

我看到了多个问题

尽量避免嵌套订阅。相反，您可以使用RxJS高阶运算符，如

switchMap

来表示相关的观察值，并使用

forkJoin

来表示独立的观察值。您可以找到有关其他运算符和函数的信息

从'rxjs'导入{forkJoin}；
从“rxjs/operators”导入{switchMap}；
恩戈尼尼特（）{
this.userServ.getUserData（）；
this.userServ.userData.pipe(
switchMap（（数据：任意）=>{
this.userData=数据；
返回叉连接(
这个.userServ.getOrderSummary（data.id），
this.cartServ.getCartTotal（data.id）
);
})
).订阅(
（[汇总，总计]=>{
this.orderSummary=summary.message[0]；
this.total=total.message[0][0]。总计；
console.log（this.userData）；
},
err=>console.log（err）
);
}

变量

this.userData

是异步初始化的。因此，在解释

ngModel

绑定时，它仍然是未定义的。在这种情况下，您可以使用在尝试访问对象的属性之前检查对象是否已定义

试试下面的方法

---

现在可以工作了，表单有值没有错误，但表单仍然无效。我必须对表单进行一些更改以使其有效，所以对此有任何想法。但是谢谢你的帮助，你的建议真的奏效了。