How to update value when using Async Pipes in Angular

Question

I would like to getting the latest value. There are 2 API. one is updatePhoneNo and another one is getPhoneValue. After I called updatePhoneNo API, the getPhoneValue is loaded and updated the latest value. But the html page is not update. How to solve it?

TS:

projects$: Observable<CustDetaill>;

ngOnInit() {
  this.projects$ = this.custService.getPhoneValue(this.custno);
}



update(){
   this.custService.updatePhoneNo(this.custphoneno).subscribe(
    res => {
        this.projects$.next(this.custphoneno);
    });
}

HTML

{{(projects$ |async)?.phoneNo}}

I think you are missing the crucial part of your code. You should include the parts where getPhoneValue is loaded and something is updated. Otherwise we are only able to guess what the problem could be. — Fabian Strathaus
– Fabian Strathaus, Commented Oct 13, 2022 at 6:08
can you please provide a link to your issue in codesandbox or stackliz? — MING WU
– MING WU, Commented Oct 13, 2022 at 6:37
are you sure that you are really initializing projects$ as an observable and not a subject? Usually it should not be possible to call next on a plain observable. Nevertheless you aren't doing anything with the response. Are you sure that this.custphoneno does contain the updated value? — Fabian Strathaus
– Fabian Strathaus, Commented Oct 13, 2022 at 6:40
can you add the code for this function custService.getPhoneValue ? thanks! — Florencia Cames
– Florencia Cames, Commented Oct 13, 2022 at 6:44
see that if you're using ChangeDetectionStrategy.onPush you need call to ChangeDetectorRef.markForCheck() — Eliseo
– Eliseo, Commented Oct 13, 2022 at 7:21

AhmAD · Accepted Answer · 2022-10-13 08:11:09Z

2

i think you should treat it as observable and use it from the typeScript like this

this.projects$.next(newValue);

update

i saw your edit .. ok first you need to change type projects$

 projects$: BehaviorSubject<CustDetaill>;

and make it takes its value with the "next" key work i wrote an example for you .. hope it can help

edited Oct 13, 2022 at 8:11

answered Oct 13, 2022 at 4:21

AhmAD

1265 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update value when using Async Pipes in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related