設置選項在Angular2中選擇與異步數據加載

Question

我有一個窗體來更新客戶對象。

我有一個客戶類型的選擇，我想在獲取客戶數據時預先選擇當前值。 我該怎麼做？

這是我的HTML格式的一部分：

<div class="form-group"> 
    <label for="type" class="req">Type</label> 
    <select class="form-control" ngControl="type"> 
     <option *ngFor="#p of typecustomerlist" [value]="p.code">{{p.label}}</option> 
    </select> 
    <div [hidden]="type.valid" class="alert alert-danger"> 
     Please select a type 
    </div> 
</div> 
<div class="form-group"> 
    <label for="lastname" class="req">Last name</label> 
    <input type="text" ngControl="lastname" value="{{customer.Lastname}}" /> 
    <div *ngIf="lastname.dirty && !lastname.valid" class="alert alert-danger"> 
     <p *ngIf="lastname.errors.required">Lastname is required.</p> 
    </div> 
</div> 

Answer 1

我找到了解決辦法。我在組件ngOnInit()方法添加這樣的：this.type.updateValue(this.customer.type);

我的組件：

export class UpdateCustomerComponent implements OnInit { 
    myCustomerForm: ControlGroup; 
    lastname: Control; 
    type: Control; 

    constructor(routeParam: RouteParams, private dataService: ContactDataService, private builder: FormBuilder) { 
     this.lastname = new Control('', 
      Validators.compose([Validators.required]) 
     ); 

     this.type = new Control(this.customer != null ? this.customer.Type : null, 
      Validators.compose([Validators.required]) 
     ); 

     this.myCustomerForm = builder.group({ 
      lastname: this.lastname, 
      type: this.type 
     }); 
    } 

    ngOnInit() { 

     this.dataService.get(this.id).subscribe(data => { 
      this.customer = <ICustomer>JSON.parse(JSON.stringify(data)); 

      this.lastname.updateValue(this.customer.Lastname); 
      this.type.updateValue(this.customer.Type); 
     }); 

    } 

}