如何使用* ngFor在角度（2-4）中循环至2倍以上 [英] how to loop to 2 times deeper in angular(2-4) with *ngFor

问题描述

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

  categories = [
 
 {
laptops：[null，
 {
category：laptops，
description：ggg，
title：Nexus <  - 我想这个值，但我canot做，请帮助我
}，
 {
category：laptops，
description：nnn ，
title：HP
}，
 {
category：laptops，
description：mmm，
title：Microsoft
}，
 {
category：laptops，
description：mmm，
title ：Razer
} 
]，
}，
 
 
 {
片：[null，
 { 
category：tablets，
description：uuu， 
title：Iphone
}，
 {
category：tablets，
description：bbb，
 title：Intel
} 
] 
} 
 
 
] 
  

在我的app.component.html中

 < div * ngFor =让类别的类别; let i = index;id ={{category。$ key}}> 
 
< / div> 
  

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

一切都好，但我怎么不能得到类别的标题 - >平板电脑

我有这个代码，但不工作我得到[对象对象]

我想得到 - >

 < div * ngFor =let类别0; let i = index;id ={{category0. $ key}}> 
< div> {{i}}< / div> 
 
< div * ngFor =let category1 of category0 [i];让ii = index;> 
 {{category1}} 
< div> {{ii}}< / div> 
 
< div * ngFor =让第一类[ii]的第二类; let iii = index;> 
 {{category2.title}} 
< div> {{iii}}< / div> 
< / div> 
 
< / div> 
 
< / div> 
  

这是输出
$ b

<0> [object Object] 1 [object object] 2 [object Object] 3 [object
Object ] 4

这是控制台上的错误

  AdminProductsComponent.html：92错误错误：无法找到类型为object的不同支持对象'[object Object]'。NgFor仅支持绑定到数组，比如数组
 at NgForOf.ngOnChanges （common.es5.js：1689）checkAndUpdateDirectiveInline（core.es5.js：10790）
 checkAndUpdateNodeInline（core.es5.js：12216）
 checkAndUpdateNode（core.es5。 js：12155）
在debugCheckAndUpdateNode（core.es5.js：12858）
在debugCheckDirectivesFn（core.es5.js：127 99）
在Object.eval [as updateDirectives]（AdminProductsComponent.html：92）
在Object.debugUpdateDirectives [as updateDirectives]（core.es5.js：12784）
在checkAndUpdateView （core.es5.js：12485）
 
  

ng-for 循环必须迭代键值 pair对象，目前没有适当的支持在angular2中迭代这些对象。可能您应该实现自定义管道来获取对象的键。

您将在这里获得有关实现管道的更多信息：

$ b

From my firebase database, I get this JSON data

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"
          }
        ]
      }


    ]

In my app.component.html

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

</div>

and is give me -> laptops and tablets

all is ok but how I can't get the title of category -> tablet

I have this code but is not working I get [object Object]

and I want to get ->

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

this is the output

0 [object Object] 1 [object Object] 2 [object Object] 3 [object Object] 4

and this is the error on console

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)

解决方案

Since your inner ng-for loops have to iterate over a key-value pair object, currently there is no proper support for iterating over such objects in angular2. Probably you should implement custom pipe to fetch the keys of an object.

You will get more idea here for implementing pipes: How to iterate [object object] using *ngFor in Angular 2

这篇关于如何使用* ngFor在角度（2-4）中循环至2倍以上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！