Angular 11 RxJS：如何将对象添加到可观察对象的嵌套列表中？答案

【问题标题】：Angular 11 RxJS: How do you add an object to a nested list of objects of an observable?Angular 11 RxJS：如何将对象添加到可观察对象的嵌套列表中？
【发布时间】：2021-10-20 16:33:42
【问题描述】：

假设我有一个对象的可观察对象，其形状为：

export interface Invoice {
  fdInvoiceID: number;
  fdInvoiceNumber: string;
  fdCustomerID: number;
  fdTotal: number
  invoiceLineItems: InvoiceLineItem[];

如果用户添加了一个行项目，我如何将其添加到可观察对象的 invoiceLineItems 列表中？

我有一个观察员发票$，我在模板中使用异步

*ngIf="invoices$ | async as invoices"

新 lineItem 保存到数据库后，我想将其添加到 invoices$.invoiceLineItems 并通过异步显示。

【问题讨论】：

标签： angular rxjs rxjs-observables

【解决方案1】：

我相信你不应该为此使用 observable。如果其数据发生变化，则存储为变量并将订阅的数据传递给输入。

<div *ngFor="let invoice of invoices"
 [items]="invoice.items"> </div>

更新：

您可以组合更改数据的事件和发票$，如下所示：

public get invoices$(): Observable<Invoice[]> {
 return combineLatest([eventThatChangesItems$, invoices$]).pipe(
   map(([invoiceLineItems, invoices]) => invoices.map(invoice) => 
     invoice.invoiceLineItems = invoiceLineItems);
   );
}

【讨论】：