Angular2是否有可能得到深嵌套的json值而不使用ngFor?
问题描述:
我目前从服务器获取json对象,而且对象也有很多嵌套的json对象。到目前为止,我一直使用* ngFor =“let a of data | pipe”(管道获得深度嵌套值)和单插值{{a.value ['someValue']}}来获得深度嵌套值JSON对象的其他情况,但这不是我的目的,因为我不想循环我的JSON。Angular2是否有可能得到深嵌套的json值而不使用ngFor?
有什么办法可以在不使用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个键(用户配置,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']}}
请帮帮忙!
预先感谢您
答
对于初学者来说,让我们假设你得到experience
阵列总是相同的,有2个元素。 ,你需要在HTML做的唯一事情是这样的:
{{ userInfo.experience[0].recLetter }}
如果要遍历整个数组exeperience
和显示recLetter
你可以这样做:
<div *ngFor="let item of userInfo.experience">
{{item.recLetter}}
</div>
答
试试这个
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>