Unterstützt NgFor Arrays mit einem Objekt

Question

Ich versuche, einige HTML mit Angular2 NgFor dynamisch zu erstellen.

Das Problem, das ich zu haben scheint, ist, dass, wann immer ich ein Array habe, das ein Objekt enthält.

Der Fehler Ich erhalte wie folgt:

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

Im Folgenden ein typisches JSON-Objekt ist (die eine von vielen Objekten in einem Array ist), die ich mich beziehe ...

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

Dieses Objekt wird korrekt gerendert. Sein erstes Kind, dass es bezieht sich unter:

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

Dieses Objekt nur ein Kind hat und hier ist, wo das Problem liegt ...

ich das gleiche Skript in jeder Komponente bin mit den Kindern zu machen ; Das Skript funktioniert in der ersten Instanz korrekt, da mehr als ein Kind vorhanden ist. In der zweiten Instanz stürzt es jedoch mit dem oben genannten Fehler ab.

Das Skript, das ich für die Schaffung von Kindern für beiden Instanzen verwenden ist wie folgt:

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

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

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

    </ul> 

</p-panel> 

und die damit verbundene ts-Datei wird wie folgt dar:

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 
    } 


} 

Wie ich dieses Skript erhalten Sie mit Objekten arbeiten, die nur eine untergeordnete Referenz enthalten?

Answer 1

Ich würde prüfen, ob das Objekt ein Array ist oder nicht, und verwandeln es dementsprechend:

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

Wenn Sie nicht einen solchen Code in der Komponentenklasse verwenden Sie könnten Sie eine eigene Leitung für diese implementieren:

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

und verwenden Sie das Rohr auf diese Weise:

<p-panel header="{{control.label}}" > 
    <ul *ngFor="let child of childRefs | arrayify"> 
    <container-panel [controlRef]="child.id"></container-panel> 
    </ul> 
</p-panel>