尽管有不同的数据，但我保证每次调用时 returns 都具有相同的值？

Question

所以首先在 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>

Answer 1

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

所以，你应该让你的 getCart return 只是可观察的流：

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

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

尽管有不同的数据，但我保证每次调用时 returns 都具有相同的值？

My promise returns the same value every time it's called despite having different data?

javascript

angular

typescript

firebase-realtime-database

angularfire