在角度应用程序中收到错误“无法找到类型为'object'的其他支持对象'[object Object]'”

Question

我有一个项目，其中有一个组件Shopping-Cart。它称为购物车服务。该服务返回一个可观察的ShoppingCart对象。但是以某种方式，在购物车html模板中，我收到此错误，“错误错误：找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterables，例如数组。”

Shopping-cart.component.html

<h1>Shopping Cart</h1>
<ng-container *ngIf="cart$ | async as cart">
  <p>you have {{ cart.totalItemCount }} items in your shopping cart</p>

  <table class="table">
    <thead>
      <th>Product</th>
      <th>Quantity</th>
      <th></th>
    </thead>
    <tbody>
      <tr *ngFor="let item of cart.items">
        <td>
          {{ item.title }}
        </td>
        <td>
          {{ item.quantity }}
        </td>
        <td>
          {{ item.totalPrice | currency:'USD': true }}
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td>{{ cart.totalPrice | currency:'USD':true  }}</td>
      </tr>
    </tfoot>
  </table>
</ng-container>

Shopping-cart.component.ts

import { Component, OnInit } from '@angular/core';
import { ShoppingCartService } from '../service/shopping-cart.service';
import { Observable } from '../../../node_modules/rxjs';
import { ShoppingCart } from '../models/shopping-cart';
import { AngularFireObject } from '../../../node_modules/@angular/fire/database';
import { ShoppingCartItem } from '../models/shopping-cart-item';

@Component({
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.css']
})
export class ShoppingCartComponent implements OnInit {

  shoppingCartRef : AngularFireObject<any>;
  carts: ShoppingCartItem[];
  cart$: Observable<ShoppingCart>;
  constructor(private shoppingCartService: ShoppingCartService) { }

  async ngOnInit() {
    this.cart$ = (await this.shoppingCartService.getCart());
  }
}

Shopping-cart.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from '../../../node_modules/@angular/fire/database';
import { take, map } from '../../../node_modules/rxjs/operators';
import { Product } from '../models/product';
import { ShoppingCart } from '../models/shopping-cart';
import { Observable } from '../../../node_modules/rxjs';
import { ShoppingCartItem } from '../models/shopping-cart-item';


@Injectable({
  providedIn: 'root'
})
export class ShoppingCartService {

  constructor(private db: AngularFireDatabase) { }

  Create(){
    return this.db.list('/shopping-carts').push({
       dateCreated: new Date().getTime()
    });
  }

   async getCart():Promise<Observable<ShoppingCart>>{

    let cartId = await this.getOrCreateCartId();
    let cart = this.db.object('/shopping-carts/' + cartId).snapshotChanges().pipe(
      map((action:any) => {
        const key = action.key;
        const items = action.payload.val().items;
        return new ShoppingCart(key, items);
      })
    )
    return cart;
  }
}

Shopping-cart.ts

import { ShoppingCartItem } from "./shopping-cart-item";

export class ShoppingCart{

    constructor(public key: string, public items: ShoppingCartItem[]){
    }

    get totalPrice(){
        let sum : number = 0;
        for(let key in this.items){
            sum += this.items[key].totalPrice;
         }
         return sum;
    }

    get totalItemCount(){
        let count = 0;
        for(let key in this.items){
           count += this.items[key].quantity;
        }
        return count;
    }
}

shopping-cart-item.ts

export class ShoppingCartItem{


    key: string;
    title: string;
    price: number;
    imageUrl: string;
    quantity: number;


    //constructor(public product: Product, public quantity: number){}
    constructor(init?: Partial<ShoppingCartItem>){}

    get totalPrice(){
        return this.price * this.quantity;
    }
}

请从中获取更多参考 https://github.com/mosh-hamedani/organic-shop https://github.com/hirenvisavadiya/ng-organic-shop