0

  • 如果您看到，在下面的 json 结构中marks array。我必须获取并显示标记数组主体值：第一、第二和第三。

  • 这些第一个、第二个和第三个值放置在标记数组内。我不知道如何获取此值并将其显示在 listview 模板中。

  • 我只想在每个列表视图项位置显示所有三个值

学生.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;

    }
}
4

1 回答 1

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 ，您将需要一个 for 循环。

于 2018-03-07T18:44:58.903 回答