angular 8 ngModel 指令如何绑定对象属性

Question

html:

    <h1>{{title}}</h1>  
    <div class="container">  
     <div class="form-group">  
     <label >Email</label>  
     <input type="email" class="form-control" [(ngModel)]="customer.account" [value]="customer.account" placeholder="enter your email here">  
     </div> <div class="form-group">  
     <label >pwd</label>  
     <input type="password" class="form-control" placeholder="enter your password here">  
     </div> <button type="button" (click)="sendLoginRequest()" class="btn signin_btn">  
      sign in  
      </button>    
    </div>

ts:

    
     import {Component, OnInit} from '@angular/core';  
     import {HttpClient} from '@angular/common/http';  

        @Component({  
          selector: 'app-root',  
          templateUrl: './app.component.html',  
          styleUrls: ['./app.component.css']  
        })  

    export class AppComponent  implements OnInit {  
      title = 'app';  
      customer: Customer;  
     constructor(private http: HttpClient) {  

      }  

      ngOnInit(): void {  

      }  
      sendLoginRequest(): void {  
        console.log(this.customer);  
      }  
    }  
     class Customer {  
       account: string;  
       password: string;  

      constructor(account: string, password: string) {  
        this.account = account;  
        this.password = password;  
      }  
     }

我尝试使用ngModel绑定customer对象中account字段,在浏览其中报错：

  Cannot read property 'account' of undefined

但是我修改如下代码,就可以运行成功：
html:

<input type="email" class="form-control" [(ngModel)]="account" [value]="account" placeholder="enter your email here">  
 

ts:

    
export class AppComponent  implements OnInit {  
  title = 'app';  
  customer: Customer;  
  account: string;  
 constructor(private http: HttpClient) {  

  }  
   ngOnInit(): void {  

   }  
  sendLoginRequest(): void {  
    console.log(this.account);  
  }  
}

问题：

为什么[(ngModel)]可以绑定字段变量,不可以绑定对象属性
如果可以绑定对象属性，我该怎么做？

我是一个新手，谢谢！

Answer 1

不是不能绑定对象属性，而是你的customer对象等于undefined，你还没有实例化Customer类，在构造器中new一个就可以。

constructor(private http:Http){

this.customer=new Custumer('','');

}

绑定在组建上的所有属性都应该初始化，包括customer和account，你绑定account虽然没有提示错，但其实绑定的是undifined，这样不好，应该给它赋初值。