Question

我正在尝试迭代对象的对象

这是响应json我会得到

    { 
     "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>

这里是从产品对象

返回密钥的功能

  generateKeys(obj) {
    return obj ? Object.keys(obj) : null
  }

但是在呈现HTML模板的同时，错误的是

Cannot read property 'items' of undefined

我错过了什么，请建议。

Answer 1

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>

另一种不那么面向rjx的方法是：

@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>

Answer 2

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

模板

<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>

函数generateKeys将从对象

返回键

 generateKeys(obj) {
    return obj ? Object.keys(obj) : null
  }

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

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

希望这能解决您的问题。

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

2 个答案: