Angular 2:更新不显示的可观察数组

时间:2017-09-25 17:29:55

标签: angular asynchronous observable

我有一个service用于客户端的check_ins和一个返回observable的get函数。

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

在我的视图中,我订阅了check_ins,如下所示:

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

和check_in是另一个模型的父级,重新定位。当我删除重新定位时,我将其设置为null并尝试更新check_in以显示重新定位为空:

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

这似乎有效,当我打印this.check_ins的新值时,它是正确的,但是视图没有更新。我不明白为什么this.check_ins的观看值与实际值不同步。

这是模板代码:

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

1 个答案:

答案 0 :(得分:1)

您能否尝试修改您的代码以适应这些变化,看看它是否有意义,是否有效。

  

服务

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

成分<​​/ P>

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
  

模板

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

让我知道它是否有任何不同。