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

Question

我刚刚开始学习这种离子/角度。所以，我有一个离子页面，它显示了通过服务获取的可观察项目列表。单击任何项​​目时，会通过将项目 ID 传递给它来打开一个弹出框。

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

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

MainPage.component.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

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

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

你的 observable 是一个发射数组的流。因此，您的 Observable 不是某个观察者正在观察的数组，它实际上是发出的 Bill[] 数组的流。因此，您无法更新已发出的值，因为它已经发出，但您希望您的 observable 发出另一个值，即更新后的 Bills 数组。

似乎你需要一个 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])
    );
  }
}