尽管有不同的数据，我的承诺每次调用时都会返回相同的值？答案

【问题标题】：My promise returns the same value every time it's called despite having different data?尽管有不同的数据，我的承诺每次调用时都会返回相同的值？
【发布时间】：2022-02-11 21:12:16
【问题描述】：

所以首先在b-navbar.component.ts中调用getCart函数：

export class BNavbarComponent implements OnInit{
  appUser: any;
  cart$ : Observable<ShoppingCart | null>;


  constructor(private auth : AuthService, private shoppingCartService : ShoppingCartService) {}

  async ngOnInit() {
    this.auth.appUser$.then(dataObservable => {
      dataObservable?.subscribe(data => {
        this.appUser = data
      });
    });

    this.getCart()
  }

  async getCart() {
    this.cart$ = await this.shoppingCartService.getCart()
    
    this.cart$.subscribe(data => {
      console.log("Nav Observable data: ", data);
    })
  }

查看shopping-cart.service.ts 并获得可观察的承诺：

export class ShoppingCartService {

  constructor(private db : AngularFireDatabase) { }

  private create(){
    return this.db.list("/shopping-carts").push({
      // dateCreated : new Date().getTime()
      date: "date"
    });
  }
  
  async getCart(): Promise<Observable<ShoppingCart>>{
    let cartId = await this.getOrCreateCartId();
    let cart = this.db.object("/shopping-carts/" + cartId);

    return new Promise((resolve) => {
      cart.valueChanges().subscribe(x => {
        let newX = x as ShoppingCart
        let items = newX.items
        resolve(of(new ShoppingCart(items)))
      })
    })
  }

  private async getOrCreateCartId() : Promise<string> {
    let cartId = localStorage.getItem("cartId");
    
    if (cartId) return cartId;
    
    let result = await this.create();
    localStorage.setItem("cartId", result.key as string);
    return result.key as string;
  }
}

现在在我的 html 中插入值时会出现问题，因为 getCart 承诺中返回的可观察对象解析了“静态”可观察对象，这意味着它在解析时终止可观察对象，因此数据永远不会更新。请帮忙:))

<a class="navbar-item" routerLink="/shopping-cart">
    Shopping Cart
    <span *ngIf = "cart$ | async as cart" class="tag is-warning is-rounded" >
        {{ cart.totalItemsCount }}
    </span>
</a>

【问题讨论】：

this.db.list("/shopping-carts").push({date: "date"}) 中的 shopping-cart-service 是否返回数组、Promise<Array 或 Observable<Array>？
返回：lang-ts AngularFireList<unknown>.push(data: unknown): firebase.database.ThenableReference

标签： javascript angular typescript firebase-realtime-database angularfire

【解决方案1】：

一旦你的承诺得到解决，它在那之后不会“发出”任何东西。这是promise 和 observables 之间的一个关键区别。即使在发出第一个值之后，Observable 也可以发出更多值。

所以，你应该让你的 getCart 只返回可观察的流：

import { map } from 'rxjs';

// rest of your code

async getCart(): Promise<Observable<ShoppingCart>>{
  let cartId = await this.getOrCreateCartId();
  let cart = this.db.object("/shopping-carts/" + cartId);
  return cart.valueChanges()
    .pipe(map(x => {
      let newX = x as ShoppingCart
      let items = newX.items
      return new ShoppingCart(items)
    }))
}

这样，您的承诺将解析为可观察的流而不是单个值。

【讨论】：