각도 2 관측 동기화 이해

Question

제출 전에 유효성을 검사해야하는 등록 양식이 있습니다. 이 목적을 위해 오류 배열에 오류를 푸시하는 메서드가 있습니다. 오류 길이가 0이면이 양식을 서버로 보내고 그렇지 않으면 오류 목록을 표시합니다.

signUpForm() { 
    this.validateOnSubmit(); 
    console.log(this.TAG + 'submit method fired! '); 

    console.log('errors array' + JSON.stringify(this.errors)); 

    if (this.errors.length == 0) { 

     /* Sending process*/ 
    } else { 
     this.showOnSubmitError(this.errors); 
    } 
    } 

주소 부분은 Observables를 통해 Google API에 요청하여 유효성이 검사됩니다.

validateOnSubmit() { 

    let fullAddress = this.regModel.Addresses[0].State + ', '; 
    fullAddress += this.regModel.Addresses[0].Street + ', '; 
    fullAddress += this.regModel.Addresses[0].City + ', '; 
    fullAddress += this.regModel.Addresses[0].Zip + ' '; 

    this.signUpHelperProvider.resolveAddr(fullAddress) 
     .subscribe(response => { 
      this.geoCodeResp = response; 
      console.log(this.TAG + 'Before submission: check received geocode response stringify: ' + JSON.stringify(this.geoCodeResp)); 
      if (this.geoCodeResp.status != 'OK' || this.geoCodeResp.results[0].address_components.length == 1) { 
      console.log('WE HAVE A PROBLEM'); 
      this.errors.push('Please, check if your address correct'); 
      console.log('WE HAVE A PROBLEM error:' + this.errors.toString()); 

      } else { 
      this.regModel.Addresses[0].Longitude = this.geoCodeResp.results[0].geometry.location.lng; 
      this.regModel.Addresses[0].Latitude = this.geoCodeResp.results[0].geometry.location.lat; 
      } 
     }); 
// 
//other checks 
// 
console.log('total errors in method: ' + this.errors.toString()); 
} 

그리고 여기에 문제가 있습니다. 오류 길이의 실제 검사는 유효성 검사 방법이 완료되기 전에 발생합니다.

I: [INFO:CONSOLE(9)] "SignUpHelperProvider: resolveAddr: address passed NY, Hfjdir6rhc, Durfjfu, 35682 ", source: 
I: [INFO:CONSOLE(14)] "total errors in method: ", 
I: [INFO:CONSOLE(13)] "SignUpPage: submit method fired! ", 
I: [INFO:CONSOLE(13)] "errors array[]", 
I: [INFO:CONSOLE(14)] "SignUpPage: Before submission: check received geocode response stringify: {"results":[{"address_components":[{"long_name":"United States","short_name":"US","types":["country","political"]}],"formatted_address":"United States","geometry":{"bounds":{"northeast":{"lat":71.5388001,"lng":-66.885417},"southwest":{"lat":18.7763,"lng":170.5957}},"location":{"lat":37.09024,"lng":-95.712891},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":49.38,"lng":-66.94},"southwest":{"lat":25.82,"lng":-124.39}}},"partial_match":true,"place_id":"ChIJCzYy5IS16lQRQrfeQ5K5Oxw","types":["country","political"]}],"status":"OK"}", 
I: [INFO:CONSOLE(14)] "WE HAVE A PROBLEM", 
I: [INFO:CONSOLE(14)] "WE HAVE A PROBLEM error:Please, check if your address correct", 

이 프로세스를 동기화하는 방법이 있습니까? 나는 Angular 2와 Ionic 2를 처음 사용하고 힌트 나 도움을 주실 것입니다.

Answer 1

signUpHelperProvider.resolveAddr은 비동기입니다. 서브 스크립 션에 보내는 과정 만하면됩니다. 이를 수행하는 한 가지 방법은 validateOnSubmit 내에서 구독하는 대신 map을 사용하고 관찰 가능을 반환하는 것입니다. 과 같이 -

validateOnSubmit() { 

    let fullAddress = this.regModel.Addresses[0].State + ', '; 
    fullAddress += this.regModel.Addresses[0].Street + ', '; 
    fullAddress += this.regModel.Addresses[0].City + ', '; 
    fullAddress += this.regModel.Addresses[0].Zip + ' '; 

    //return async op to subscribe 
     return this.signUpHelperProvider.resolveAddr(fullAddress) 
      .map(response => { 
       this.geoCodeResp = response; 
       console.log(this.TAG + 'Before submission: check received geocode response stringify: ' + JSON.stringify(this.geoCodeResp)); 
       if (this.geoCodeResp.status != 'OK' || this.geoCodeResp.results[0].address_components.length == 1) { 
       console.log('WE HAVE A PROBLEM'); 
       this.errors.push('Please, check if your address correct'); 
       console.log('WE HAVE A PROBLEM error:' + this.errors.toString()); 

       } else { 
       this.regModel.Addresses[0].Longitude = this.geoCodeResp.results[0].geometry.location.lng; 
       this.regModel.Addresses[0].Latitude = this.geoCodeResp.results[0].geometry.location.lat; 
       } 
      // 
      //other checks 
      // 
     console.log('total errors in method: ' + this.errors.toString()); 
     return response;//return the response in case required at subscription 
      }); 

    } 

귀하의 signUpForm은 다음과 같습니다

signUpForm() { 
    this.validateOnSubmit().subscribe(response=>{ 
    console.log(this.TAG + 'submit method fired! '); 

    console.log('errors array' + JSON.stringify(this.errors)); 

    if (this.errors.length == 0) { 

     /* Sending process*/ 
    } else { 
     this.showOnSubmitError(this.errors); 
    } 
    }); 
    } 

이 IMO 당신이 공급자에서 호출 비동기 같은 수행 할 필요가