如何循环与在角（2-4）更深2倍* ngFor(how to loop to 2 times dee

从我的火力点数据库，我得到这个JSON数据

categories= [ 

      {
        "laptops" : [ null, 
          {
            "category" : "laptops",
            "description" : "ggg",
            "title" : "Nexus" <-- I want this value but i canot do that pls help me
          }, 
          {
            "category" : "laptops",
            "description" : "nnn",
            "title" : "HP"
          }, 
          {
            "category" : "laptops",
            "description" : "mmm",
            "title" : "Microsoft"
          }, 
          {
            "category" : "laptops",
            "description" : "mmm",
            "title" : "Razer"
          } 
        ],
      },


      {
        "tablets" : [ null, 
          {
            "category" : "tablets",
            "description" : "uuu",
            "title" : "Iphone"
          }, 
          {
            "category" : "tablets",
            "description" : "bbb",
            "title" : "Intel"
          }
        ]
      }


    ]

在我app.component.html

<div *ngFor="let category of categories; let i = index;" id="{{category.$key}}">

</div>

并给我- > 笔记本电脑和平板电脑

一切正常，但我怎么也无法得到类别的标题 - >平板电脑

我有这样的代码，但不工作我得到的翻译：

我想 - >

         <div *ngFor="let category0 of categorys; let i = index;" id="{{category0.$key}}">
            <div>{{i}}</div>

            <div *ngFor="let category1 of category0[i]; let ii = index;">
              {{category1}}
              <div>{{ii}}</div>

              <div *ngFor="let category2 of category1[ii]; let iii = index;">
                {{category2.title}}
                <div>{{iii}}</div>
              </div>

            </div>

          </div>

这是输出

0 [对象的对象] 1 [对象的对象] 2 [对象的对象] 3 [对象的对象] 4

这是在控制台上的错误

AdminProductsComponent.html:92 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngOnChanges (common.es5.js:1689)
    at checkAndUpdateDirectiveInline (core.es5.js:10790)
    at checkAndUpdateNodeInline (core.es5.js:12216)
    at checkAndUpdateNode (core.es5.js:12155)
    at debugCheckAndUpdateNode (core.es5.js:12858)
    at debugCheckDirectivesFn (core.es5.js:12799)
    at Object.eval [as updateDirectives] (AdminProductsComponent.html:92)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12784)
    at checkAndUpdateView (core.es5.js:12122)
    at callViewAction (core.es5.js:12485)

Answer 1:

因为你内心的ng-for循环必须遍历一个key-value对的对象，目前有用于遍历在angular2此类对象没有适当的支持。 也许你应该实现自定义管道来获取对象的键。

在这里你会得到更多的想法实现管道： 如何遍历[目标对象]使用* ngFor在2角

Answer 2:

既然你有对象的数组，每一个键，就需要循环的类别和领取钥匙为每个类别（只是一个在你的例子）。 您可以通过准备这样做string[][]在组件categoryKeys的阵列，但如果你想有一个管道，这是清洁去做，管将看起来像

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

你将需要你的模块中声明。

您的组件的HTML将是这个样子：

<div *ngFor="let category of categories">
  <div *ngFor="let categoryKey of category | keys" id="{{categoryKey}}">
    <div>{{categoryKey}}</div>
    <div *ngFor="let categoryItem of category[categoryKey]">
      <div *ngIf="!!categoryItem">
        <div>{{categoryItem.title}}</div>
        <div>{{categoryItem.description}}</div>
      </div>
    </div>
  </div>
</div>

Answer 3:

当你有一个属性category中的每个项目我不知道为什么你再组他们。 但仍然解决您的问题，我有一个解决方案如下，

constructor() {
    let key1[] = [];
    _.forEach(this.categories, function(value, key) {
      key1.push(value);
    })
    let realDat[] = []
    _.forEach(key1, function(k) {
          let te = Object.values(k);
          let d = Object.values(_.mapValues(te, function(o) {return o}))
          _.forEach(d, function(ve) {
            realDat.push(ve);
          })
    })
    this.realData=realDat;
}

标记：

<div *ngFor="let category of realData; let i = index;">
    <span  *ngFor="let c of category">{{c.title}}<br/></span>
</div>

现场演示

文章来源: how to loop to 2 times deeper in angular(2-4) with *ngFor