javascript - Angular8 - 无法迭代对象

Question

我正在使用 Angular8，并且下面有以下代码。

问题:

1. 为什么在组件中 Observable 只有一项(应该有四项)。
2. 在 html 中，为什么我不能迭代对象？我以为它是一个数组。

服务:

private listProductsJSON: any;
private listProducts$: BehaviorSubject<Product[]>;

public getItems(url: string): Observable<Product[]> {
  this.listProducts$ = <BehaviorSubject<Product[]>> new BehaviorSubject({});
  this.listProductsJSON = require('/Users/richardmarais/Development/examples/angular-menu-routes/menu-routes-app/src/app/model/products.json');  // gets some hard coded json with 4 rows
  Object.keys(this.listProductsJSON.products).map(key => {
    //console.log(this.listProductsJSON.products[key]); // logs 4 rows
    this.listProducts$.next(this.listProductsJSON.products[key]);
  });

  return this.listProducts$.asObservable();
}

组件:

private productsData: Product[];

ngOnInit() {
    this._productService.getItems(this.dataService.serviceData.URL).subscribe((products: Product[]) => {
        console.log(products);  // only logs 1 row        
        this.productsData = products;
    });
}

html:

    <ul>
      <div *ngFor="let product of productsData">
        <li>{{ product }}</li>
      </div>
    </ul>

控制台日志:(应该是四项，但只有一项)

{status: "validated", name: "lions", description: "", id: "yXfhYcDpzYmyWGYptNme", order: 4}

错误:

ProductsComponent.html:5 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'lions'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:4841)
    at checkAndUpdateDirectiveInline (core.js:31912)
    at checkAndUpdateNodeInline (core.js:44366)
    at checkAndUpdateNode (core.js:44305)
    at debugCheckAndUpdateNode (core.js:45327)
    at debugCheckDirectivesFn (core.js:45270)
    at Object.eval [as updateDirectives] (ProductsComponent.html:5)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
    at checkAndUpdateView (core.js:44270)
    at callViewAction (core.js:44636)
View_ProductsComponent_1 @ ProductsComponent.html:5
logError @ core.js:45545
handleError @ core.js:6066
(anonymous) @ core.js:41057
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39571
tick @ core.js:41054
(anonymous) @ core.js:40892
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39698
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39510
next @ core.js:40889
schedulerFn @ core.js:35335
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35297
checkStable @ core.js:39641
onHasTask @ core.js:39718
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
Show 2 more frames
ProductsComponent.html:5 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 5, nodeDef: {…}, elDef: {…}, elView: {…}}

产品.ts

export class Product {
    status:      string;
    name:        string;
    description: string;
    id:          string;
    order:       number;
 }

产品.json

{
    "products": {
        "drivers": {
            "status": "validated",
            "name": "drivers",
            "description": "",
            "id": "5rI6n3O2T2z3uKLqbEGj",
            "order": 1
        },
        "zombies": {
            "status": "validated",
            "name": "zombies",
            "description": "active",
            "id": "e6T8tOrbUQH1qyo2ECfj",
            "order": 2
        },
        "passengers": {
            "status": "validated",
            "name": "passengers",
            "description": "",
            "id": "tP4SkWIYRubHN6mCZRA5",
            "order": 3
        },
        "lions": {
            "status": "validated",
            "name": "lions",
            "description": "",
            "id": "yXfhYcDpzYmyWGYptNme",
            "order": 4
        }
    }
}

Answer 1

您应该使用keyvalue管道来迭代对象。

例如

HTML

 <ul>
  <div *ngFor="let product of productsData | keyvalue">
    <li>{{ product.value.status }}</li>
  </div>
</ul>