Question

我目前从服务器获取json对象，该对象也有许多嵌套的json对象。到目前为止，我一直在使用* ngFor =＆＃34;让一个数据|管＆＃34; （用于获得深层嵌套值的管道）和单个插值{{a.value [＆＃39; someValue＆＃39;]}}以获取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模板中尝试了这个但是没有工作，我也不知道如何获得＆＃39; recLetter＆＃39;

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

请帮忙！

提前谢谢

Answer 1

对于初学者，我们假设你得到的experience数组总是相同的，有2个元素。你需要在html中做的唯一事情就是：

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

如果你想遍历整个数组exeperience并显示recLetter，你可以这样做：

<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>

Angular2是否可以在不使用ngFor的情况下获得深层嵌套的json值？

2 个答案: