Angular2 ngForを使わずに深いネストしたjson値を取得することは可能ですか？

Question

私は現在jsonオブジェクトをサーバーから取得していますが、オブジェクトには多くの入れ子jsonオブジェクトもあります。これまでのところ、私は* ngFor = "データのパイプ（深く入れ子にされた値を取得するパイプ）と単一の補間{{a.value ['someValue']}}を使って深いネストされた値を取得しました。他の状況ではjsonオブジェクトを使用していますが、これは私のjsonをループしたくないので、今は私の目的を果たしていません。

ngForを使用せずに深くネストされたjson値を取得する方法はありますか？

jsonオブジェクトの一部がサーバーから取得しています。

UserProfile: 
{name: 'Jess' 
University: 'UC Berkley' 
Major: 'Media Communication' 
birthday: 1994} 

categoryInfo: 
["inish work with quality"] 

currentArea 
:"CA" 

introInfo { 
experience: [ 
0: {Company: 'Atlas', workingYears: 1, **recLetter**:'She was on time always, 
never late. The quality of her work is very high-level.'} 
1: {Company: 'Footstep', workingYears: 2, recLetter:'She was on time always, 
never late. The quality of her work is very high-level.'} 
] 
introduction: "Hello I'm Jess" 
} 

そして、私は前述の方法を使用している場合、それだけでループ私が望んでいない4つのキー（のUserProfile、categoryInfo、currentArea、およびintroInfoを）なります。

* ngForを使用せずに太字（recLetter）で値を取得するにはどうすればよいですか？

私のコンポーネントでは、これをやっています。

userInfo: UserDetailInfo[]; 

    getUserDetail(): void { 

    this.userDetail.getUserDetail() 
    .subscribe 
    (
     userInfo => this.userInfo = userInfo, 
     error => this.errorMessage = error 
     ) 
    } 

そして、私はHTMLテンプレートでこれを試みたが、うまくいきませんでしたし、私が取得する方法を知りませんでした「recLetter」

{{userInfo.experience['0']}} 

助けてください！

は手始めに、事前

Answer 1

にありがとう、あなたは2つの要素を持つ配列experienceいつも同じことを、得ると仮定することができます。あなたはこれを行うことができ、アレイ全体exeperienceと表示recLetterをループにしたい場合は

{{ userInfo.experience[0].recLetter }} 

：あなたがHTMLで行う必要があり 唯一のものはこれです

<div *ngFor="let item of userInfo.experience"> 
    {{item.recLetter}} 
</div> 

Answer 2

はこれを試してみてください

properties.pipe.ts

import {Pipe} from '@angular/core'; 

@Pipe({name: 'properties'}) 
export class PropertiesPipe { 
    transform(o: {}) { 
    return Object.entries(o).map(([key, value]) => ({ 
     key, 
     value 
    })); 
    } 
} 

app.module.ts

import {propertiesPipe} from './properties.pipe'; 

@NgModule({ 
    declarations: [PropertiesPipe, /* whatever else was here */], 
    // ... whatever else was here 
}) export class AppModule { } 

component.html

<ul> 
    <li *ngFor="property of userInfo | properties"> 
    <span *ngIf="!Array.isArray(property.value)"> 
     {{property.key}}: {{property.value}} 
    </span> 
    <span *ngIf="Array.isArray(property.value)"> 
     {{property.key}}: <span *ngFor="value of property.value">{{value}}, </span> 
    </span> 
    </li> 
</ul>