Javascript angular 4迭代对象的对象以获取动态数据

我试图迭代对象的对象

这是我将得到的响应

    { 
     "123445": {
      "displayName": "abcd",
      "items": [
        {
          "id": "e7363730-552d-4943-a3b8-082db653fc16",
          "name": "xyz",
          "displayName": "xyd",
          "price": "75",
          "quntity": "100"
        },
        {
          "id": "302fda08-502d-4f5a-98b8-cbca34f8e186",
          "name": "pqr",
          "displayName": "pqr",
          "price": "60",
          "quntity": "100"
        }

      ]
    }
}

这就是我所尝试的

<div *ngFor="let key of generateKeys(products | async)">
    <div *ngFor="let product of products[key].items | async">{{ product | json}}</div>
</div>

但在呈现HTML模板时，它给出了一个错误

Cannot read property 'items' of undefined

我是否遗漏了什么，请建议。

导入'rxjs/add/operator/share'；
import 'rxjs/add/operator/share';

@Component({...})
export class FooComponent{
 products$: Observable<{[id:string]:any}>;

 constructor(private _fooService: FooService){
   this.products$ = _fooService.getProducts().share(); //set observable
 }

  get keys$(){
    return this.products$
    .map(map => Object.keys(map));
  }

  getProducts$(key:string){
    // TODO check key existence
    return this.products$
     .map(map => map[key])
     .map(obj => obj.items || [])
  }
}

<div *ngFor="let key of keys$ | async">
    <div *ngFor="let product of getProducts$(key) | async">{{ product | json}}</div>
</div>

@组件（{…}）
导出类组件{
产品美元：可观察；
构造函数（私有的_fooService:fooService）{
this.products$=\u fooService.getProducts（）.share（）；//设置可观察
}
获取密钥$（）{
退回此产品$
.map（map=>Object.keys（map））；
}
getProducts$（关键字：字符串）{
//TODO检查密钥是否存在
退回此产品$
.map（map=>map[key]）
.map（obj=>obj.items | |[]）
}
}
{{product | json}}

另一种不太面向rjxs的方法是：

@Component({...})
export class FooComponent{
 products$: Observable<{[id:string]:any}>;

 constructor(private _fooService: FooService){
   this.products$ = _fooService.getProducts(); //set observable
 }

  getKeys(map: any): string[]{
    let result = [];
    if(map){
      result = Object.keys(map); 
    }
    return result;
  }

  getProducts(key:string,map: any): any[] {
    let result [];
    if(map & map[key]){
     result = map[key];
    }
    return result;
  }
}

<ng-container *ngIf="products$| async as products">
  <div *ngFor="let key of getKeys(products)">
    <div *ngFor="let product of getProducts(key,products)">{{ product | json}}
    </div>
   </div>
</ng-container>

@组件（{…}）
导出类组件{
产品美元：可观察；
构造函数（私有的_fooService:fooService）{
this.products$=\u fooService.getProducts（）；//设置可观察
}
getKeys（映射：任意）：字符串[]{
让结果=[]；
如果（地图）{
结果=Object.keys（map）；
}
返回结果；
}
getProducts（key:string，map:any）：any[]{
让结果[]；
if（映射和映射[键]）{
结果=映射[键]；
}
返回结果；
}
}
{{product | json}}

导入'rxjs/add/operator/share'；
@组件（{…}）
导出类组件{
产品美元：可观察；
构造函数（私有的_fooService:fooService）{
this.products$=\u fooService.getProducts（）.share（）；//设置可观察
}
获取密钥$（）{
退回此产品$
.map（map=>Object.keys（map））；
}
getProducts$（关键字：字符串）{
//TODO检查密钥是否存在
退回此产品$
.map（map=>map[key]）
.map（obj=>obj.items | |[]）
}
}
{{product | json}}

另一种不太面向rjxs的方法是：

@Component({...})
export class FooComponent{
 products$: Observable<{[id:string]:any}>;

 constructor(private _fooService: FooService){
   this.products$ = _fooService.getProducts(); //set observable
 }

  getKeys(map: any): string[]{
    let result = [];
    if(map){
      result = Object.keys(map); 
    }
    return result;
  }

  getProducts(key:string,map: any): any[] {
    let result [];
    if(map & map[key]){
     result = map[key];
    }
    return result;
  }
}

<ng-container *ngIf="products$| async as products">
  <div *ngFor="let key of getKeys(products)">
    <div *ngFor="let product of getProducts(key,products)">{{ product | json}}
    </div>
   </div>
</ng-container>

@组件（{…}）
导出类组件{
产品美元：可观察；
构造函数（私有的_fooService:fooService）{
this.products$=\u fooService.getProducts（）；//设置可观察
}
getKeys（映射：任意）：字符串[]{
让结果=[]；
如果（地图）{
结果=Object.keys（map）；
}
返回结果；
}
getProducts（key:string，map:any）：any[]{
让结果[]；
if（映射和映射[键]）{
结果=映射[键]；
}
返回结果；
}
}
{{product | json}}

根据我的理解，您可以试试这个

模板

<ng-container *ngIf="products | async as products">
    <div *ngFor="let key of generateKeys(products)">
        <span>{{key}}</span>
        <div *ngFor="let product of getProducts(products,key)">
            <span>{{product.id}}</span>
        </div>
    </div>
</ng-container>

函数getProducts将返回产品中的项目

 getProducts(productsList, key: string) {
    return key ? productsList[key].items : null
  }

---

希望这能解决您的问题。

根据我的理解，您可以试试这个

模板

<ng-container *ngIf="products | async as products">
    <div *ngFor="let key of generateKeys(products)">
        <span>{{key}}</span>
        <div *ngFor="let product of getProducts(products,key)">
            <span>{{product.id}}</span>
        </div>
    </div>
</ng-container>

函数getProducts将返回产品中的项目

 getProducts(productsList, key: string) {
    return key ? productsList[key].items : null
  }

---

希望这能解决您的问题。

如果您想创建数组，您的productsList现在是一个对象而不是数组：

productsList=[{object1}、{object2}、{等等}]

@Swoox，他使用了返回数组的

Object.keys

）@Alexandru IonutMihai将返回一个对象键数组，但productsList仍然是一个不能在上面使用的对象。@Swoox，不。

generateKeys

返回一个数组，然后他迭代

products[key]

。这是一个数组的项。@Swoox是的，我使用Object.keys来获取键。为了更好地命名，我将变量名productList更改为productsYour productsList现在是一个对象，而不是一个数组，如果您想创建数组：

productsList=[{object1}、{object2}、{等等}]

@Swoox，他使用了返回数组的

Object.keys

）@Alexandru IonutMihai将返回一个对象键数组，但productsList仍然是一个不能在上面使用的对象。@Swoox，不。

generateKeys

返回一个数组，然后他迭代

products[key]

。这是一个数组的项。@Swoox是的，我使用Object.keys来获取键。为了更好地命名，我将变量名productList更改为products