Question

如果您看到marks array，请在下面的json结构中。我必须得到显示标记数组体值：第一，第二和第三。
这些第一，第二和第三个值放在标记数组中。一世不知道如何获取此值并在listview模板中显示它。
我只想在每个listview项目中显示所有三个值位置

students.json：

[
    {
        "id": 1,
        "name": "denver",
        "marks": [
            {
                "identity": [],
                "body": {
                    "first": "Pollard",
                    "second": "Bravo",
                    "third": "Kevin"
                } 
            },
            {
                "identity": [],
                "body": {
                    "first": "Michael",
                    "second": "Waugh",
                    "third": "Stone"
                }
            }
        ]
    },
    {
        "id": 2,
        "name": "kallis",
        "marks": [
            {
                "identity": [],
                "body": {
                    "first": "Yuvi",
                    "second": "Maxwell",
                    "third": "Rock"
                }
            },
            {
                "identity": [],
                "body": {
                    "first": "Steve",
                    "second": "Laughlin",
                    "third": "Jeff"
                }
            }
        ]
    },

    {
        "id": 3,
        "name": "younis",
        "marks": [
            {
                "identity": [],
                "body": {
                    "first": "Ben",
                    "second": "Stokes",
                    "third": "Smith"
                }
            },
            {
                "identity": [],
                "body": {
                    "first": "Archer",
                    "second": "Matt",
                    "third": "Glenn"
                }
            }
        ]
    }

]

app.component.html：

<StackLayout height="100%">

    <ListView [items]="studentList" class="list-group" height="70%">
        <ng-template let-item="item" let-i="index">
            <StackLayout class="input-border">

                <Label [text]="item.name" class="module-title"></Label>

             <!--   <StackLayout>
                    <Label [text]="item.first" class="user-title"></Label>
                    <Label [text]="item.second" class="item-title" textWrap="true"></Label>
                    <Label [text]="item.third" class="item-title" textWrap="true"></Label>

                </StackLayout>  -->

            </StackLayout>
        </ng-template>

    </ListView>

App.component.ts：

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from 'data/observable-array'
import { Student } from './model/Student';
import * as Application from "application";
import { AppService } from './app.service'

@Component({
    selector: "app",
    moduleId: module.id,
    providers: [AppService],
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent implements OnInit {
    private studentList: ObservableArray<Student>;

    constructor(private appService: AppService) {
    }
    ngOnInit() {
        this.studentList = this.appService.getStudent();
    }

}

app.service.ts：

import { Injectable } from '@angular/core'
import { Student } from './model/Student'
import { ObservableArray } from 'data/observable-array'

var getData = require("./model/student.json");

@Injectable()
export class AppService {

    getStudent(): ObservableArray<Student> {
        var studentList: ObservableArray<Student> = new ObservableArray<Student>();

        console.log("StudentArray", JSON.stringify(getData));

        for (var i = 0; i <getData.length; i++) {
            var student = new Student();
            student.name = getData[i].name;
            console.log("nameStudent", getData[i].name);


        studentList.push(student);

        }

        return studentList;

    }
}

Answer 1

由于marks是一个对象数组，您应该能够通过数组访问然后访问字段来访问这些值：

<StackLayout>
    <Label [text]="item.marks[0].body.first" class="user-title"></Label>
    <Label [text]="item.marks[0].body.second" class="item-title" textWrap="true"></Label>
    <Label [text]="item.marks[0].body.third" class="item-title" textWrap="true"></Label>
</StackLayout>

但是如果你想显示所有标记而不手动指定marks的索引，你还需要一个for循环。

如何从json解析嵌套数组值并在listview模板nativescript angular2中显示它

1 个答案: