Question

从我的firebase数据库中，我得到了这个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>

并且给我 - ＆gt; 笔记本电脑和平板电脑

一切都好，但我怎么也得不到类别的标题 - ＆gt;平板电脑

我有这个代码但是没有工作我得到[object Object]

我希望得到 - ＆gt;

         <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中迭代这些对象。您可能应该实现自定义管道来获取对象的键。

您将在此处了解实施管道的更多信息：How to iterate [object object] using *ngFor in Angular 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>

LIVE DEMO

如何使用* ngFor将角度（2-4）更深地循环到2倍

从我的firebase数据库中，我得到了这个JSON数据

在我的app.component.html

3 个答案: