调用 .next() 后，Angular Observable 不会在视图中更新

Question

I am using Google Maps API to validate an address. I have a service to handle this in a function called checkDistance() In the service, I created an observable called verifyMessage$ to communicate in the view if the address is valid or not.

The view contains a verify button that calls the component function verifyAddress() which then calls the service's checkDistance();

Here's the problem: the observable is not updated with the new value until I click the page again. I click verify, and then in the console I can see the result has been set but the "Loading..." does not go away and the verifyMessage value is not updated until I randomly click the page somewhere. What am I doing wrong? How do I fix this?

delivery-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>

checkout service:

  ...

  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);  

  }

Answer 1

i had a similar problem using angular +8. When i use only

ng serve 

angular rxjs was not sending the next value, but if i use

ng serve --aot=true

it works, it should be an issue on optimization. Hope it helps!