Question

学习如何使用Angular 2显示嵌套数据。网上有很多类似的问题，但是我还没有看到任何细分成一个我可以关注和重复的简单对象。

我有一个显示JSON英雄列表的列表： Basic List & Detail for Superman and Batman

我目前的目标是显示所选英雄的帐户列表。

我的问题是此处的代码与我希望根据所选英雄显示帐户的列表相关。

我可以看到我的JSON在哪里可以看到子嵌套细节，但我似乎无法将这种细节级别放入列表中。

英雄detail.component.html

<main class="col-sm-9">
    <div *ngIf="hero">
        <h2>{{hero.user[0].firstName}} {{ hero.user[0].lastName }}</h2>
        <div>
            <label>First Name: </label>
            <input [(ngModel)]="hero.user[0].firstName" placeholder="First Name">
        </div>
        <div>
            <label>Last Name: </label>
            <input [(ngModel)]="hero.user[0].lastName" placeholder="Last Name">
        </div>

        <ul class="list-group">
            <li class="list-group-item" *ngFor="let hero of heroes">
                <div *ngFor="let account of accounts">
                    {{ account[0].accountName }}
                </div>
            </li>
        </ul>
    </div>
</main>

英雄detail.component.ts

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
    selector: 'my-hero-detail',
    templateUrl: './heroes-detail.component.html'
})
export class HeroesDetailComponent {

    @Input()
    hero: Hero;

}

英雄component.html

<aside class="col-sm-3">
<div class="list-group">
    <button class="list-group-item" 
        *ngFor="let hero of heroes" 
        [class.selected]="hero === selectedHero" 
        (click)="onSelect(hero)">
        {{ hero.user[0].firstName }} {{ hero.user[0].lastName }}
    </button>
</div>
</aside>

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

heroes.component.ts

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

import { Hero }             from './hero';
import { HeroService }      from './hero.service';

@Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    providers: [ HeroService ]
})
export class HeroesComponent implements OnInit {
    title = 'Tour of Heroes';

    heroes: Hero[];
    selectedHero: Hero;

    constructor(
        private heroService: HeroService) { }

    getHeroes(): void {
        this.heroService
            .getHeroes()
            .then(heroes => this.heroes = heroes);
    }

    ngOnInit(): void {
        this.getHeroes();
    }

    onSelect(hero: Hero): void {
        this.selectedHero = hero;
    }

}

模拟heroes.ts

import { Hero } from './hero';

export const HEROES: Hero[] = 
[
    {
        "heroId": 1001,
        "alias": "Superman",
        "user": [
            {
                "firstName": "Clark",
                "lastName": "Kent",
                "email": "clark.kent@dailyplanet.com"
            }
        ],
        "accounts": [
            {
                accountNum: "1234567890",
                accountName: "Personal Checking",
                type: "checking",
                balance: 1500.00
            },
            {
                accountNum: "2345678901",
                accountName: "Personal Savings",
                type: "savings",
                balance: 2000.00
            }
        ]
    },
    {
        "heroId": 1002,
        "alias": "Batman",
        "user": [
            {
                "firstName": "Bruce",
                "lastName": "Wayne",
                "email": "bruce.wayne@wayne.com"
            }
        ],
        "accounts": [
            {
                accountNum: "1234567890",
                accountName: "Personal Checking",
                type: "checking",
                balance: 7500000.00
            },
            {
                accountNum: "2345678901",
                accountName: "Personal Savings",
                type: "savings",
                balance: 20000000.00
            }
        ]
    }
]

Answer 1

你必须这样做：

<ul class="list-group">
   <li class="list-group-item" *ngFor="let hero of heroes">
       <div *ngFor="let account of hero.accounts">
          {{ account[0].accountName }}
       </div>
   </li>
</ul>

您必须将第二个*ngFor与hero.accounts一起使用，并使您的模板结构更好，您在顶级 div 元素中使用hero，如何获得该结果：

<div *ngIf="hero">

首先根据您的要求退房。希望这能帮助你。

Answer 2

此问题已使用此处的Elvis operator (?.)解决：Angular2 ngFor Iterating over JSON

hero.ts

export class Hero {
    id: number;
    name: string;
    firstName: string;
    lastName: string;
    accounts: Array<Account>;
}

export interface Account {
    bank: string;
    type: string;
    balance: number;
}

英雄-detail.component.html

<main class="col-sm-9">
    <div *ngIf="hero">
        <h2>{{hero.firstName}} {{ hero.lastName }}</h2>
        <div>
            <label>id: </label>{{hero.id}}
        </div>
        <div>
            <label>First Name: </label>
            <input [(ngModel)]="hero.firstName" placeholder="First Name">
        </div>
        <div>
            <label>Last Name: </label>
            <input [(ngModel)]="hero.lastName" placeholder="Last Name">
        </div>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Bank Name</th>
                    <th>Account Type</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let account of hero?.accounts">
                    <td>{{ account.bank }}</td>
                    <td>{{ account.type }}</td>
                    <td>{{ account.balance }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</main>

模拟heroes.ts

import { Hero } from './hero';

export const HEROES: Hero[] = 
[
    {
        "id": 11, 
        "name": "Superman",
        "firstName": "Clark",
        "lastName": "Kent",
        "accounts": [
            {
                "bank": "Chase",
                "type": "Checking",
                "balance": 1000.00
            },
            {
                "bank": "Chase",
                "type": "Savings",
                "balance": 2000.00
            }
        ]
    },
    {
        "id": 12, 
        "name": "Batman",
        "firstName": "Bruce",
        "lastName": "Wayne",
        "accounts": [
            {
                "bank": "Bank of Gotham",
                "type": "Checking",
                "balance": 1000000000.00
            },
            {
                "bank": "Bank of Gotham",
                "type": "Savings",
                "balance": 2000000000.00
            }
        ]
    },
    {
        "id": 13, 
        "name": "Wonder Woman",
        "firstName": "Diana",
        "lastName": "Prince",
        "accounts": [
            {
                "bank": "",
                "type": "",
                "balance": 0.00
            },
            {
                "bank": "",
                "type": "",
                "balance": 0.00
            }
        ]
    }
]

在Angular2中显示JSON文件中的嵌套对象

2 个答案: