ngFor多维json对象

Question

我的角应用程序调用了一个外部API，该API返回产品的JSON字符串。

productService发出一个简单的API调用：

getProducts() {
    return this.http.get(this.apiUrl + '/getProducts', this.config)
}

我的组件将数据订阅给一个变量：

AllProducts: Object;
ProductGroups: Object;

constructor(private _product: ProductService) {}

ngOnInit() {
    this._product.getProducts().subscribe(data = > {
        this.AllProducts = data;
        this.ProductGroups = Object.keys(data);
        console.log("Got Products");
        console.log(this.AllProducts);
        console.log(this.ProductGroups);
    })
}

Json字符串看起来如下：

{\"Product1\": {\"P1-1\": {\"productType\": \"Test\", \"productStatus\": \"In Stock\", \"productTitle\": \"Product1 Test Product\", \"productDescription\": \"First test product1\"}}, \"Product2\": {\"P2-1\": {\"productType\": \"Test\", \"productStatus\": \"In Stock\", \"productTitle\": \"Product2 test product 1\", \"productDescription\": \"The first product of group 2\"}, \"P2-2\": {\"productType\": \"Test\", \"productStatus\": \"Out of Stock\", \"productTitle\": \"Product2 test product 2\", \"productDescription\": \"Second product of group 2\"}}}

AllProducts的浏览器控制台输出如下所示：

Object {
Product1: Object {
"P1-1": Object { productType: "Test"
 ...

我的HTML使用嵌套的*ngFor尝试并呈现页面上的任何内容：

<div *ngfor='let productGroup of ProductGroups'>
   <h2>{{productGroup}}</h2>
   <ul>
      <li *ngfor="let item of AllProducts['productGroup']">
         {{item}}
      </li>
   </ul>
</div>

<h2>正确地呈现产品组名称，但我无法列出任何产品详细信息。

编辑：

如果调整JSON字符串更容易，我也可以控制API。

我还应该提到，它目前的角度为6.0.0，我还无法让它在6.1.0或任何其他版本上工作。

Answer 1

为此，可以使用KeyValuePipe (在角6.1中可用)：

<div *ngFor='let productGroup of AllProducts | keyvalue'>
    <h2>{{productGroup.key}}</h2>
    <ul>
      <li *ngFor="let item of productGroup.value | keyvalue">
        {{item.key}}
         <ul>
            <li *ngFor="let innerItem of item.value | keyvalue">
                  {{innerItem.key}}: {{innerItem.value}}
            </li>
         </ul>
      </li>
    </ul>
  </div>