각도 2 동기 메서드를 기다립니다

Question

2 드롭 다운이 있고 드롭 다운 1의 값을 기준으로 두 번째 드롭 다운을 채 웁니다. 시나리오를 편집하고 그리드를 기반으로 드롭 다운 값을 채 웁니다.

private populateContacts(relationship: Relationship) { 
     this.getContacts(relationship.businessAreaId); 
     this.selectedContact = this.contacts.find(contact => contact.id === relationship.contacts[0].id); 
    } 

    private getContacts(businessAreaObjorId) { 
     if (businessAreaObjorId === NaN) 
      businessAreaObjorId = businessAreaObjorId.id; 
     this.businessAreaService.getContacts(businessAreaObjorId) 
      .subscribe(
      contacts => this.contacts = contacts, 
      error => this.errorMessage = error); 
    } 

HTML은

<tr *ngFor="let relationship of relationships"> 
       <td>{{relationship.supplierName}}</td> 
       <td>{{relationship.businessArea}}</td> 
       <td>{{relationship.contacts[0].name}}</td> 
       <td><a href="javascript:void(0)" (click)="onEdit(relationship)">Edit</a></td> 
      </tr> 
      <tr class="active"> 
       <td> 
        <select class="form-control" name="supplier" required 
          [(ngModel)]="selectedSupplier" #supplier="ngModel"> 
         <option *ngFor="let supplier of suppliers" [ngValue]="supplier">{{supplier.name}}</option> 
        </select> 
        <div [hidden]="supplier.valid || supplier.pristine" class="alert alert-danger"> 
         Supplier is required 
        </div> 
       </td> 
       <td> 
        <select class="form-control" name="businessArea" required 
          [(ngModel)]="selectedBusinessArea" #businessArea="ngModel" (ngModelChange)="getContacts($event)"> 
         <option *ngFor="let businessArea of businessAreas" [ngValue]="businessArea">{{businessArea.name}}</option> 
        </select> 
        <div [hidden]="businessArea.valid || businessArea.pristine" class="alert alert-danger"> 
         Business Area is required 
        </div> 
       </td> 
       <td> 
        <select class="form-control" name="contact" required 
          [(ngModel)]="selectedContact" #contact="ngModel"> 
         <option *ngFor="let contact of contacts" [ngValue]="contact">{{contact.name}}</option> 
        </select> 
        <div [hidden]="contact.valid || contact.pristine" class="alert alert-danger"> 
         Contact is required 
        </div> 
       </td> 
       <td> 
        <input type="button" value="Add" class="btn btn-default" (click)="onSubmit()" [disabled]="!factoryRelationshipForm.form.valid" /> 
       </td> 
      </tr> 

내가 편집 링크은 onEdit 방법을 클릭

를 호출 이하 및 선택 /은 값을 할당하지만 상대의 selction에 실패합니다.

private onEdit(relationship: Relationship): void { 
    relationship.inEditMode = true; 
    this.selectedSupplier = this.suppliers.find(supplier => supplier.id === relationship.supplierId); 
    this.selectedBusinessArea = this.businessAreas 
     .find(businessArea => businessArea.id === relationship.businessAreaId); 
    this.populateContacts(relationship); 
} 

private populateContacts(relationship: Relationship) { 
    this.getContacts(relationship.businessAreaId); 
    this.selectedContact = this.contacts.find(contact => contact.id === relationship.contacts[0].id); 
} 

내가 접촉 배열의 접촉을 찾기 위해 노력하고있는 줄에 실패합니다.

나는 이유는 service.getcontacts 가정은 HTTP 호출이며 시간이 걸리고 난 정의되지 않은입니다 this.contacts 배열의 연락처 개체를 찾기 위해 노력하고 있습니다 때.

populateContacts 메소드에서 getContacts를 기다리는 방법이 있습니까?

편집 1 : 내 새로운 코드는이

private populateContacts(relationship: Relationship) { 
     //TODO: find a way to use this.contacts/getContacts 
     this.businessAreaService.getContacts(relationship.businessAreaId) 
      .subscribe(val => { 
       console.log(val); 
       this.contacts = val; 
       this.selectedContact = this.contacts.find(contact => contact.id === relationship.contacts[0].id) 
      }); 
    } 

private getContacts(businessAreaObj) { 
    this.businessAreaService.getContacts(businessAreaObj.id) 
     .subscribe(
     contacts => this.contacts = contacts, 
     error => this.errorMessage = error); 
} 

편집이 보이는

:

@Gunter '솔루션은 편집의 경우에 작동하지만 내가 수동으로 드롭 다운 값을 선택하면 BA에서는 연락처 드롭 다운에 연락처를로드하지 않습니다.

Answer 1

당신은 Observable를 반환해야합니다. 이를 위해 당신은 당신이 그것을 호출 할 수 있습니다 subscribe()

private getContacts(businessAreaObjorId) { 
    if (businessAreaObjorId === NaN) 
     businessAreaObjorId = businessAreaObjorId.id; 
    return this.businessAreaService.getContacts(businessAreaObjorId) 
     .catch(error => this.errorMessage = error) 
     .map(
     contacts => this.contacts = contacts); 

    } 
} 

를 호출하지합니다 Observable 당신이 구독 할 수 있습니다 얻고, 콜백에서 당신은 후속 코드 전화 :

private populateContacts(relationship: Relationship) { 
    this.getContacts(relationship.businessAreaId) 
    .subscribe(val => this.selectedContact = this.contacts.find(contact => contact.id === relationship.contacts[0].id)); 
}