更新离子页面中的可观察列表

Question

我刚刚开始学习这个离子/角度。因此，我有一个离子页面，它显示了通过服务获取的可观察项目的列表。点击任何项目后，通过向其传递项目id来打开弹出窗口。

此项目id用于获取和显示popover中的项目详细信息。最后，在popover中，有一个提交按钮，它将项目状态更新为1。

主页.html

<div *ngFor="let bill of Bills$ | async">
  <ion-label>{{bill.Name}}</ion-label>
  {{bill.Description}}
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="openBill(bill.Id)">Draft Bill</ion-button>
    </ion-buttons>
  </ion-toolbar>
</div>

主页面组件.ts

  Bills$: Observable<Bill[]>;
  openBill(ev:any){
    console.log("Bill Id: "+ev);
    this.presentPopover(ev);
  }
  async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: DraftbillPage,
      componentProps: {
        "BillId": ev
      },
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    return await popover.present();
  }
  ngOnInit() {
    this.getBills();
  }
  getBills() {
    this.Bills$ = this.userService.getBills();
  }

用户服务.ts

export class UserService {
  user: User;
  Bills$: Observable<Bill[]>;
  constructor() {   
    this.user = new User();
    this.user.Bills = Bills;   
    this.Bills$ = of(this.user.Bills);
  }
  //Method called through popover update item status from 0 to 1
  DraftBill(Id: number) {
    this.user.Bills.filter(b => b.Id == Id)[0].Status = 1;
  }
  //Method called through main page to fetch list of items with status 0
  getBills(): Observable<Bill[]> {
    return this.Bills$.pipe(
      map(bills => bills.filter(b => b.Status == 0))
    );
  }
  //Method called through popover to item details
  getBill(Id: number): Observable<Bill> {
    return this.Bills$.pipe(
      map(bills => bills.filter(b => b.Id == Id)[0])
    );
  }
}

问题是我在主页中的列表在更改项目状态后没有得到更新。我想在主页中更新我的列表，只使用状态为0的项目。我不确定我的做法是否正确。

Answer 1

根据您的代码，您最初确实创建了this.user.Bills的Observable，但随后您在下面的代码中修改了源数组，而不是数组订阅者通过您的Observable:获得的

DraftBill(Id: number) {
    this.user.Bills.filter(b => b.Id == Id)[0].Status = 1;
}

你们的可观测到的是一个发射阵列的流。所以你的Observable<比尔[]>不是某个观测者正在观察的数组，它实际上是一个发射的Bill[]数组流。因此，您不能更新已发出的值，因为它已经发出，但您希望您的可观察对象发出另一个值，即更新的Bill数组。

似乎您需要一个Subject，一个既是Observable又是Observer的对象(它继承自Observer和Observable接口(。在您的特定情况下，您可能需要一个向任何订阅者发出初始值的BehaviorSubject：

Bills$: BehaviorSubject<Bill[]> = new BehaviorSubject( here is the original array );

现在要修改其值，您可以：

this.Bills$.next( new array with updated values )

现在，订阅此BehaviorSubject的所有模板都将传播新的值。

如果您可以共享stackblitz中的完整代码，那么修改现有代码应该很容易。

所以你的服务可以是：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class UserService {
  user: User;
  Bills$: BehaviorSubject<any[]> = new BehaviorSubject([]);
  constructor() {   
    this.user = new User();
    this.user.Bills = Bills;   
    this.Bills$ = new BehaviorSubject(this.user.Bills);
  }
  DraftBill(Id: number) { 
      this.user.Bills.filter(b => b.Id == Id)[0].Status = 1; 
      this.Bills$.next(this.user.Bills); 
  }
  getBills(): Observable<Bill[]> {
    return this.Bills$.pipe(
      map(bills => bills.filter(b => b.Status == 0))
    );
  }
  getBill(Id: number): Observable<Bill> {
    return this.Bills$.pipe(
      map(bills => bills.filter(b => b.Id == Id)[0])
    );
  }
}