Question 201098 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular variables value not updated after receiving data

I’ve a piece of code in ts file as follows

totalCrList : number = 0;
tabs: []

 ngOnChanges() {
  //some code
  this.someFunc();
   this.tabs.push({
     "id": "tab3",
     "title": `Associate / Linked Change Request (${this.totalCrList ? this.totalCrList : ''})`, //always displays '0'
     "active": false
 })
}

someFunc() {
   this.someService.someObservable.subscribe(resp => {
     this.totalCrList = resp.reduce((count, changeReq) => count + changeReq.values.filter( val => val.crId ).length, 0); //Here I get the value
   this.cdr.detectChanges();
   })
}

In UI this.totalCrList always displays 0. The variable value is not updated, even I tried detectChanges. I’m not sure why its not updating the value

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    RxJS Use RxJS to update the view A BehaviorSubject allows you to define a default value (makes sense in your example, but does not necessary be the right choice all the time), also buffers the last emitted value.

    totalCrList : number = 0;
// ------ Creating the observable ----------
// Create a Behaviour Subject- The thing that will be watched by the observable
private crCount$: BehaviorSubject<number> = new BehaviorSubject<number>(this.totalCrList); 
tabs: []

 ngOnChanges() {
  //some code
  this.someFunc();
    // ------ Getting Your updates ----------
   // Subscribe to the observable you created...data will be updated each time there is a change to BehaviourSubject
    this.subscription = this.crCount$.subscribe((count:number) => {
         if (count) {
           this.tabs.push({
              id: 'tab3',
              title: `Associate / Linked Change Request (${count})`,
              active: false,
           });
        }
    });
}

someFunc() {
   this.someService.someObservable.subscribe(resp => {
     this.totalCrList = resp.reduce((count, changeReq) => count + changeReq.values.filter( val => val.crId ).length, 0); //Here I get the value
   this.crCount$.next( this.totalCrList ); //emit the value
   })
}

 // ------- Be responsible and unsubscribe before you destory your component to save memory ------
ngOnDestroy() {
 if(this.subscription) {
   this.subscription.unsubscribe();
 }
}

  2. 0

    Your this.tabs.push(//... happens before the async action is complete. You could, for example, modify the code so someFunc returns a stream:

    ngOnChanges() {
    //some code
    this.someFunc().subscribe(value => {
        this.tabs.push({
            "id": "tab3",
            "title": `Associate / Linked Change Request (${value || ''})`, //always displays '0'
            "active": false
        });
    })

}
}

someFunc() {
    return this.someService.someObservable.pipe(
        map(resp => {
            this.totalCrList = resp.reduce((count, changeReq) => count + changeReq.values.filter(val => val.crId).length, 0);
            return this.totalCrList;
        }))
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search