ngFor 多维 json 对象

Question

我的 angular 应用程序调用外部 API，其中 returns 一个 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。

我还应该提到它目前在 Angular 6.0.0 上，我还不能让它在 6.1.0 或任何其他版本上运行。

Answer 1

您可以使用 KeyValuePipe （在 angular 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>

ngFor 多维 json 对象

ngFor multidimensional json object

angular

loops

object

ngfor