Angular 2: Updating observable array not displaying

Question

I have a service for a client's check_ins and a get function that returns the observable.

constructor(private clientService: ClientService) {
  this._check_ins = <BehaviorSubject<any>>new BehaviorSubject([]);
}

get check_ins() {
  return this._check_ins
}

updateCheckIns(check_ins) {
  this._check_ins.next(check_ins)
}

in my view I subscribe to the check_ins like so:

this.check_in_obs = this.checkInService.check_ins.subscribe(check_ins => {
      this.check_ins = check_ins
})

and check_in is the parent for another model, repositioning. When I delete the repositioning, I set it to null and attempt to update the check_in to show the repositioning is null:

this.check_in.repositioning = null
this.checkInService.updateCheckIns(this.check_ins)

This seems to work, and when I print the new value for this.check_ins, it is correct, however the view is not updated. I don't understand why the views value for this.check_ins is not in sync with the real value.

Here's the template code:

<ion-row class="" id="weigh-in-table" style="flex-wrap:nowrap;overflow-x: scroll;margin-left: 200px;margin-top:21px;">
  <ion-col
    no-padding
    style="min-width:300px;"
    *ngFor="let check_in of check_ins; let i = index"
  >
    <weigh
      [isDraggable]="dragEnabled"
      [check_in]="check_in"
      [check_ins] = "check_ins"
      [client_id]="client.id"
      [current_user]="current_user"
      [program_id]="program_id"
      [client]="client"
      [index]="i"
      [token]="current_user.auth_token"
      >
    </weigh>
  </ion-col>
</ion-row>

This get check_ins method isn't returning an observable, which may be preventing your subscription to it in your component from receiving the current value. — bazzells
– bazzells, Commented Sep 25, 2017 at 17:40

amal · Accepted Answer · 2017-09-25 19:13:24Z

1

Could you please try and modify your code to accommodate these changes and see if (it makes sense and if) it is working.

service

get check_ins() {
  return this._check_ins.asObservable();
}

component

this.check_ins = this.checkInService.check_ins;

// change this to
// this.check_in.repositioning = null
// this.checkInService.updateCheckIns(this.check_ins)
this.checkInService.updateCheckIns(null);
// if you still wanna make use of a this.check_in object please show what you do with it

template

<ion-row class="" id="weigh-in-table" style="flex-wrap:nowrap;overflow-x: scroll;margin-left: 200px;margin-top:21px;">
  <ion-col
    no-padding
    style="min-width:300px;"
    *ngFor="let check_in of check_ins | async; let i = index"
  >
    <weigh
      [isDraggable]="dragEnabled"
      [check_in]="check_in"
      [check_ins] = "check_ins | async"
      [client_id]="client.id"
      [current_user]="current_user"
      [program_id]="program_id"
      [client]="client"
      [index]="i"
      [token]="current_user.auth_token"
      >
    </weigh>
  </ion-col>
</ion-row>

Let me know if it made any difference.

answered Sep 25, 2017 at 19:13

amal

3,1801 gold badge15 silver badges21 bronze badges

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

2 Comments

Jeremy Thomas Over a year ago

I'm going to accept it as it gets most of the way there. Pointing out that I had been returning this._check_ins rather than this._check_ins.asObservable(); made a difference.

amal Over a year ago

Cool, thanks for pointing that out. I was trying to force the object initialized as of type BehaviourSubject (which can be both an observer and an observable) to act as an observable by doing so. Was trying to figure out by mind than actually test it out, lol.

Collectives™ on Stack Overflow

Angular 2: Updating observable array not displaying

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related