Question

我遇到嵌套JSON文件的问题。我使用primeNG模板dataTable和treeTable。当我尝试通过控制台中的API调用访问数据时，我可以看到数据，但在模板中我收到此错误：

错误错误：尝试区分[对象对象]＆＃39;时出错。只允许数组和可迭代

json文件

{
"CategoryId": "257cf663-f6ba-40f7-69b8-08d527528e70",
"Name": "House Only",
"OverBudgetCalculator": true,
"Scopes": [
    {
        "ScopeId": 1,
        "Name": "Budget",
        "Question": {
            "QuestionId": 1,
            "Content": "What is your maximum budget ?",
            "QuestionType": "range",
            "Strict": true,
            "NeutralScore": 10,
            "Weight": 100,
            "UpDownSelectionApplied": false,
            "Active": true,
            "RelatedProductFields": [
                {
                    "RelatedProductFieldId": 3,
                    "FieldName": "Budget",
                    "Step": 1000,
                    "Min": 0,
                    "Max": 0
                }
            ],
            "Answers": []
        }
    },
    {
        "ScopeId": 2,
        "Name": "Levels",
        "Question": {
            "QuestionId": 2,
            "Content": "Do you want a single or double ?",
            "QuestionType": "singleSelection",
            "Strict": true,
            "NeutralScore": 10,
            "Weight": 95,
            "UpDownSelectionApplied": false,
            "Active": true,
            "RelatedProductFields": [
                {
                    "RelatedProductFieldId": 10,
                    "FieldName": "House_Only_Levels",
                    "Step": 0,
                    "Min": 0,
                    "Max": 0
                }
            ],
            "Answers": [
                {
                    "AnswerId": 18,
                    "Title": "Double Story",
                    "Content": "Double Story",
                    "MatchRule": "Double",
                    "UpDownSpecifications": [],
                    "Selected": false
                },
                {
                    "AnswerId": 19,
                    "Title": "Single Story",
                    "Content": "Single Story",
                    "MatchRule": "Single",
                    "UpDownSpecifications": [],
                    "Selected": false
                }
            ]
        }

scope.service.ts

 import { Injectable } from '@angular/core';
 import { Http, Response, Headers, RequestOptions } from "@angular/http";
 import { AppSessionService } from '@shared/common/session/app-session.service';
 import { Observable } from 'rxjs/Observable';
 import { Scope } from './scope';
 import { TreeTableModule } from 'primeng/components/treetable/treetable';

 @Injectable()
 export class ScopeService {
 constructor(
    private http: Http,
    private appSessionService: AppSessionService) { }


// GET api/categories/scopes/257CF663-F6BA-40F7-69B8-08D527528E70
getScopes(categoryId): Observable<any> {

    let headers = new Headers({ 'Content-Type': 'application/json' })
    let options = new RequestOptions({ headers: headers });

    return this.http.get('/api/categories/' + categoryId)
        .map((res: Response) => res.json())
        .catch(this.handleErrorObservable);
}

private extractData(res: Response) {
    let body = res.json();
    return body.data || {};
}

private handleErrorObservable(error: Response | any) {
    console.error(error.message || error);
    return Observable.throw(error.message || error);
  }
}

scope.component.ts

import { Component, Injector, OnInit, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { ScopeService } from './scope.service';
import { DataTable } from 'primeng/components/datatable/datatable';
import { Paginator } from 'primeng/components/paginator/paginator';
import { TreeTableModule } from 'primeng/components/treetable/treetable';


@Component({
    templateUrl: './scopes.component.html',
    animations: [appModuleAnimation()]
})
export class ScopesComponent extends AppComponentBase implements OnInit {

    errorMessage: String;
    scopes: any = [];
    categoryId: String = '257CF663-F6BA-40F7-69B8-08D527528E70';

    constructor(
        injector: Injector,
        private scopeService: ScopeService 
    ) {
       super(injector);
    }

   ngOnInit(): void {
        this.getScopes(this.categoryId);
    }

    getScopes(categoryId) {

        this.scopeService.getScopes(categoryId).subscribe(values => {
        this.scopes = values;
        console.log(this.scopes);
    })
  }
}

这是带有treeTable的组件文件

scope.component.html（treeTable）

<p-treeTable [value]="scopes" [style]="{'margin-top':'50px'}">
            <p-header>Editable Cells with Templating</p-header>
            <p-column field="CategoryId" header="ScopeId">
                <ng-template let-node="rowData" pTemplate="body">
                    <input type="text" [(ngModel)]="categories.Scopes.ScopeId" style="width:100%;border-width:0px 0px 1px 0px">
                </ng-template>
            </p-column>
            <p-column field="Name" header="Name">
                <ng-template let-node="rowData" pTemplate="body">
                    <input type="text" [(ngModel)]="categories.Scopes.Name" style="width:100%;border-width:0px 0px 1px 0px">
                </ng-template>
            </p-column>
        </p-treeTable>

这是包含dataDatable的组件文件。

scope.components.html（dataTable）

 <p-dataTable [value]="scopes"
                     selectionMode="single"
                     [rows]="10"
                     [responsive]="true">
            <p-column field="Scopes" header="Scope name">
                <ng-template let-account="rowData" pTemplate="body">
                    <ul>
                        <li *ngFor="let scope of categories.scopes">
                            {{scope.ScopeId}} - {{scope.Name}}
                        </li>
                    </ul>
                </ng-template>
            </p-column>
        </p-dataTable>

当我使用dataTable选项时，我得到了不同的错误。

错误类型错误：val.slice不是函数

enter image description here

错误错误：尝试差异[对象对象]＆＃39;时出错。只允许数组和可迭代

0 个答案: