Angular Observable не обновляется в поле зрения после вызова .next () - PullRequest
Новая
       16

Angular Observable не обновляется в поле зрения после вызова .next ()

0 голосов
/ 05 апреля 2019

Я использую Google Maps API для проверки адреса. У меня есть сервис для обработки этого в функции с именем checkDistance () . В сервисе я создал наблюдаемую вещь с именем verifyMessage $ для связи в представлении, является ли адрес действительным или нет.

Представление содержит кнопку проверки, которая вызывает функцию компонента verifyAddress () , которая затем вызывает службу checkDistance ();

Вот проблема: наблюдаемое не обновляется новым значением, пока я снова не нажму на страницу. Я нажимаю проверить, и затем в консоли я вижу, что результат был установлен, но «Загрузка ...» не исчезает, и значение verifyMessage не обновляется, пока я случайно не щелкну где-нибудь на странице. Что я делаю неправильно? Как это исправить?

доставка-component.html 

     <input formControlName="address" matInput placeholder="Start typing delivery address..." google-place> 
    <button mat-raised-button color="primary" (click)="verifyAddress()" class="col-2">Verify</button>
    <p class="col-12" *ngIf="checkout.verifyMessage$ | async as message; else no message">{{ message.value }}</p>

    <p class="col-12" *ngIf="checkout.loading">Loading...</p>

Оформление заказа: 

  ...

  async checkDistance(location_obj) { 

    this.loading = true; 


    ... Google Maps API stuff ..

          this.result = this.checkValidity(distance);

          console.log('result is: ', this.result);   

          if (this.result) {

            // if valid set this message so can be updated in view

            this.verifyMessage$.next({value: 'Great, that address is in our range.'}); 
            this.loading = false; 
            this.verified=true;

          } else {

            this.verifyMessage$.next({value: 'Uh oh, that address is out of our range. '}); 
            this.loading = false; 
            this.verified=false;
          }
        });
  }

deliveryPrompt.component.ts 

import ...

export class DeliveryPromptComponent implements OnInit {

  deliveryAddressForm: FormGroup; 
  message: string; 
  verified$ = new BehaviorSubject({value: false});
  verified = this.verified$.asObservable();

  loading = false; 

  constructor(public dialogRef: MatDialogRef<DeliveryPromptComponent>, @Inject(MAT_DIALOG_DATA) public data: any, public checkout: CheckoutHandlerService,  public fb: FormBuilder, public loginService: AuthService, private cd: ChangeDetectorRef) { 

  }

  ngOnInit() {
    this.checkout.verifyMessage$.subscribe(); 
    this.checkout.verifyMessage.subscribe(); 

    this.deliveryAddressForm = this.fb.group({
      address: ['', [Validators.required]]
    }); 
    this.deliveryAddressForm.valueChanges.subscribe(form => {
      //console.log(form); 
     }); 
     this.message = ''; 
  }

...
  async verifyAddress() {

    console.group('loading 1', this.loading); 
    await this.checkout.checkDistance(this.checkout.tempAddress);  

  }
...