0

我正在尝试使用 Angular2 的 NgFor 动态创建一些 HTML。

我似乎遇到的问题是，每当我有一个包含一个对象的数组时。

我得到的错误如下：

"Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays".

下面是一个典型的 JSON 对象（它是数组中的许多对象之一），我指的是...

{
        "id": "B5EE385D-1D6A-335A-1E94-2F857428A6FB",
        "type": "workBench",
        "label": "By Collection",
        "activeArea": "SELECTIONBYCOLLECTION",
        "alpha": "100",
        "backgroundAlpha": "100",
        "backgroundColor": "0xFFFFFF",
        "bottomArray": "1,3,2,3,4,4,4,4,4",
        "color": "0x2d89ef",
        "columnCount": "15",
        "description": "Part of the Selection Project",
        "enabled": "true",
        "fCode": "f230",
        "gap": "5",
        "icon": "assets\\Slim4WebMetroIcons\\Software Icons\\SELECTION.png",
        "layout": "cell",
        "leftArray": "5,1,5,5,5,2,3,4,1",
        "numCols": "5",
        "numRows": "4",
        "padding": "5",
        "percentHeight": "100",
        "percentWidth": "100",
        "postTitleContentToApplication": "true",
        "requestDataOnNavTo": "0",
        "rightArray": "5,4,5,5,5,2,3,4,1",
        "rowHeight": "250",
        "rowScaleType": "fitScreen",
        "selectedIndex": "0",
        "titleVisible": "true",
        "topArray": "1,1,2,3,4,4,4,4,4",
        "topContentAreaVisible": "true",
        "visible": "1",
        "children": {
          "child": [
            {
              "id": "D5009DBB-B35D-F358-F0D7-447B6EA40732",
              "expand": "1"
            },
            {
              "id": "87D46DA2-044E-65A6-7CCD-3BA13ECSCDBP",
              "expand": "1"
            },
            {
              "id": "F2D16F8F-EE8E-1BF6-C1E8-447B901BB86C",
              "expand": "1"
            },
            {
              "id": "41EE9C5A-E789-E2BF-7DB1-447B846C2A3B",
              "expand": "1"
            },
            {
              "id": "3BB46EBF-5E7B-8FA2-3080-441DBB9D20DF",
              "expand": "1"
            },
            {
              "id": "260F2FD7-27AD-620A-ADD3-441DC4DAA3F7",
              "expand": "1"
            },
            {
              "id": "74E494A2-E8E1-5166-EA4A-441DCDBC2D20",
              "expand": "1"
            },
            {
              "id": "602FBE66-7552-8996-4873-441DE833ECCC",
              "expand": "1"
            },
            {
              "id": "382CA1C5-AD17-BDAA-75DB-441DDD55CC72",
              "expand": "1"
            }
          ]
        },
        "sessionVars": {
          "sessionVar": { "name": "activeArea" }
        },
        "dataObjects": {
          "dataObject": {
            "id": "SelectionCollectionButtons",
            "type": "get"
          }
        },
        "topContent": {
          "child": { "id": "048A9A5E-A1A8-6DFA-F2E2-87568F67C5C3" }
        },
        "leftContent": {
          "width": "180",
          "visible": "1",
          "static": "false",
          "open": "true",
          "child": { "id": "6848C68A-0FA6-ABCD-8057-77A1B95121FA" }
        }
      },

该对象正确渲染。它所指的第一个孩子如下：

{
        "id": "D5009DBB-B35D-F358-F0D7-447B6EA40732",
        "type": "panel",
        "label": "Availability",
        "backgroundAlpha": "100",
        "backgroundColor": "0xFFFFFF",
        "cellAllocation": "5",
        "columnCount": "1",
        "description": "Panel displaying ONLY Availability Pod (Gauge)",
        "enabled": "1",
        "expand": "1",
        "fCode": "f2000",
        "layout": "vertical",
        "minWidth": "0",
        "padding": "0",
        "percentWidth": "100",
        "rowHeight": "250",
        "rowScaleType": "definedRowHeight",
        "visible": "1",
        "children": {
          "child": { "id": "8838E161-4DC2-EFA2-6971-44B04077DFA2" }
        }
      }

这个对象只有一个孩子，这就是问题所在......

我在每个组件中使用相同的脚本来渲染孩子；第一个实例中的脚本可以正常工作，因为有多个孩子，但是在第二个实例中，它会因上述错误而崩溃。

我用于为这两个实例创建子级的脚本如下：

<p-panel header="{{control.label}}" >

    <ul *ngFor="let child of childRefs">

       <container-panel [controlRef]="child.id"></container-panel>

   </ul>

</p-panel>

而相关的ts文件如下：

import {Component}      from '@angular/core';
import {OnInit}         from '@angular/core';
import {Input}          from '@angular/core';

import {Panel}          from 'primeng/primeng';

import {Control }           from '../services/service.controls';
import {ControlRef }        from '../services/service.controls';
import {ControlsService }   from '../services/service.controls';


import {PodContainer}  from './container.pod'

@Component({
    templateUrl : 'app/containers/container.panel.html',
    selector    : 'container-panel',
    directives  : [Panel,PodContainer],
    providers   : [ControlsService] 
})

export class PanelContainer implements OnInit  {


    private controls: Control[];

    @Input() private controlRef:string = ""








    private controlData:Control

    private childRefs:ControlRef[]


    constructor(private controlsService:ControlsService) { }

    ngOnInit() 
    {
        this.control   = this.controlsService.getControlByID(this.controlRef); 
        this.childRefs = this.control.children.child;
    }

    toControlRefs(val) {
        var ploop:childRefs = [val]
        return ploop 
    }


}

如何让此脚本与仅包含一个子引用的对象一起使用？

4

1 回答 1

0

我会测试该属性是否是一个数组并相应地对其进行转换：

ngOnInit() {
  this.control   = this.controlsService.getControlByID(this.controlRef); 
  this.childRefs = this.control.children.child;
  this.childRefs = Array.isArray(this.childRefs)
          ? this.childRefs : [ this.childRefs ];
}

如果您不在组件类中使用此类代码，则可以为此实现自定义管道：

@Pipe({
  name: 'arrayify'
})
export class ArrayifyPipe {
  transform(val) {
    return Array.isArray(val)
          ? val : [ val ];
  }
}

并以这种方式使用管道：

<p-panel header="{{control.label}}" >
  <ul *ngFor="let child of childRefs | arrayify">
    <container-panel [controlRef]="child.id"></container-panel>
  </ul>
</p-panel>
于 2016-06-03T15:23:22.447 回答