我在绕过这个问题时遇到了一些麻烦，希望我可以帮忙解决问题。我有一个json文件，返回3个放在数组中的对象。在每个对象中还有另一个json调用来获取对象的更多信息。我想返回并将内部json调用合并到主对象中，以便可以从对象本身访问每个对象的数据。
这是我的json文件的结构：
context每个链接返回一组与另一个不相似的不同数据。
这就是我的json将在内部get调用后将对象填充到主对象中的方式 - 更新：
{
"Animals": {
"title": "Animals",
"id": 1,
"info": {
"link": "urlLinkHere"
}
},
"Cars": {
"title": "Cars",
"id": 2,
"info": {
"link": "urlLinkHere"
}
},
"Food": {
"title": "Food",
"id": 3,
"info": {
"link": "urlLinkHere"
}
}
}
在我的HTML中，这是我尝试过的。的更新：
{
"Animals": {
"title": "Animals",
"id": 1,
"info": {
"link": [
{
"id": "1",
"gender": "Male",
"dob": "2014-05-03T14:48:34-08:00",
"location": "New York",
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
"id": "2",
"gender": "Male",
"dob": "2014-05-03T14:48:34-08:00",
"location": "North Carolina",
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
"id": "3",
"gender": "Female.",
"dob": "2014-05-03T14:48:34-08:00",
"location": "Texas",
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
]
}
},
"Cars": {
"title": "Cars",
"id": 2,
"info": {
"link": [
{
"id": "1",
"make": "Ford",
"price": "$15,000"
},
{
"id": "2",
"make": "BMW",
"price": "$32,450"
},
{
"id": "3",
"make": "Aston Martin",
"dob": "$203,231"
}
]
}
},
"Food": {
"title": "Food",
"id": 3,
"info": {
"link": [
{
"id": 1,
"uuid": "39ea8762-422b-11e7-a919-92ebcb67fe33",
"name": "Ritz",
"title": "Ritz",
"fatPercent": 20
},
{
"id": 2,
"uuid": "39ea89ce-422b-11e7-a919-92ebcb67fe33",
"name": "Cheetos",
"title": "Cheetos",
"fatPercent": 40
},
{
"id": 3,
"uuid": "39ea8ad2-422b-11e7-a919-92ebcb67fe33",
"name": "Jello",
"title": "Jello",
"fatPercent": 32
}
]
}
}
}
这就是我目前所尝试的......
在我的服务档案中：
<div *ngFor="let result of results: let i = index">
<div class="header"> {{result.title}}</div>
<div class="bodyContent" for-of="let item of subData; let i=index;">
<div *ngIf="result.title == 'Animals'">
{{item.gender}}, {{item.location}}
</div>
<div *ngIf="result.title == 'Cars'">
{{item.make}}, {{item.price}}
</div>
<div *ngIf="result.title == 'Food'">
{{item.name}}, {{item.fatPercentage}}
</div>
</div>
</div>
在我的组件文件中：
getData(){
return this._http.get('url')
.map((res:Response) => res.json())
.map((obj) => Object.keys(obj).map((key)=>{return obj[key]}))
.catch(this.handleError);
}
getDataQuery(link:any){
return this._http.get(link)
.map((res:Response) => res.json())
.catch(this.handleError);
}
HTML：
getData(){
this.dataService.getData()
.flatMap(data => {
this.results = data;
for(let x of this.results){
var link = x.info.link;
this.observables.push(this.dataService.getDataQuery(link));}
return Observable.forkJoin(this.observables);}
).subscribe(data => {
this.subData = data;
});
目前，当我尝试调试时，我可以看到内部json文件结果体内的所有对象 - 我希望它指定给当前显示的项目。
获取数据的示例
<div *ngFor="let result of results: let i = index">
<div class="header"> {{result.title}}</div>
<div class="bodyContent" *ngFor="let item of subData; let i=index;">
Here i would like to have the returned data from the inner json call.
</div>
</div>
从forloop获取画布数据集
所以我试图使用ng2-charts添加画布，画布需要一个数据集和标签来绘制x和y轴，但是我无法从forloop填充x和y
例如：
[
{
"id": "1",
"gender": "Male",
"dob": "2014-05-03T14:48:34-08:00",
"location": "New York",
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
"id": "2",
"gender": "Male",
"dob": "2014-05-03T14:48:34-08:00",
"location": "North Carolina",
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
"id": "3",
"gender": "Female.",
"dob": "2014-05-03T14:48:34-08:00",
"location": "Texas",
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
]
答案 0 :(得分：1)
通过调用$packageXml = ''
choco list -lo -r | % { $_ -split '\|' | select -first 1 } | % { $packageXml += "`n`t<package Id=""$_"" />" }
Set-Content "<packages>$packageXml`n</packages>" .\packages.config
获取数据后，您似乎想要覆盖choco install packages.config
属性以包含数组。像这样更新组件中的link
getDataQuery更新您的模板
getData答案 1 :(得分：1)
最有可能是一个更优雅的解决方案，我需要阅读我的rxjs;）但这是有效的：
按原样保留getData：
getData(){
return this._http.get('url')
.map((res:Response) => res.json())
.map((obj) => Object.keys(obj).map((key)=>{return obj[key]}))
.catch(this.handleError);
}
然后您的组件订阅：
ngOnInit() {
this.dataService.getData()
.subscribe(data => {
this.results = data;
// iterate array
this.results.forEach(result => {
// do second request based on the link
this.dataService.getDataQuery(result.info.link)
.subscribe(data => {
// push result to object property 'details', or name of your choosing
result.details = data
})
})
})
}
和您的getDataQuery：
getDataQuery(link:any){
return this._http.get(link)
.map((res:Response) => res.json())
.catch(this.handleError);
}
然后您可以在模板中使用[ngSwitch]：
<div *ngFor="let result of results">
<div class="header"><h3> {{result.title}}</h3></div>
<div [ngSwitch]="result.title">
<div *ngSwitchCase="'Animals'">
<div *ngFor="let item of result.details">
{{item.gender}}, {{item.location}}
</div>
</div>
<div *ngSwitchCase="'Cars'">
<!-- Properties here -->
</div>
<div *ngSwitchCase="'Food'">
<!-- Properties here -->
</div>
</div>
</div>
最后是一个 DEMO ，为了简单起见，后续返回相同的数据，因此我只是硬编码，例如“Car data here here。”