我有一个角状的部件,订阅了一个观察的,由角服务返回。
成分:help.component.ts
import { WikiService } from '../../../services/wiki.service';
import { WikiTree } from '../../../interfaces/WikiTree';
export class HelpComponent implements OnInit {
wikiTree$: Observable<WikiTree>
wikiChildTree$: Observable<WikiTree>
public infoCards: Array<Object>;
constructor(private wikiService: WikiService) {}
ngOnInit() {
this.wikiTree$ = this.wikiService.GetWikiHierarchy();
this.wikiTree$.subscribe((data)=>{
const newInfoCards = data.page.results.map(result => (
{
"image": "",
"title": result.title,
"titleLink": "/page/wiki/"+ result.id,
"children": [] /*TODO: Populate this array with a Service call based on result.id*/
}))
this.infoCards = [...this.infoCards,...newInfoCards]
},
(err) => {
console.log(err);
}
);
}
该wikiTree$
可观察具有以下JSON,转换成打字原稿:
{
"page": {
"results": [
{
"id": "123456789",
"type": "page",
"status": "current",
"title": "Start here",
"extensions": {
"position": 0
},
"_links": {
"webui": "/display/MYSPACE/Start+here",
"edit": "/pages/resumedraft.action?draftId=123456789",
"tinyui": "/x/BQD2Mw",
"self": "https://wiki.abc.com/rest/api/content/123456789"
},
"_expandable": {
"container": "/rest/api/space/MYSPACE",
"metadata": "",
"operations": "",
"children": "/rest/api/content/123456789/child",
"restrictions": "/rest/api/content/123456789/restriction/byOperation",
"history": "/rest/api/content/123456789/history",
"ancestors": "",
"body": "",
"version": "",
"descendants": "/rest/api/content/123456789/descendant",
"space": "/rest/api/space/MYSPACE"
}
},
{
"id": "567890123",
"type": "page",
"status": "current",
"title": "FAQ",
"extensions": {
"position": 1
},
"_links": {
"webui": "/display/MYSPACE/FAQ",
"edit": "/pages/resumedraft.action?draftId=567890123",
"tinyui": "/x/HQD2Mw",
"self": "https://wiki.abc.com/rest/api/content/567890123"
},
"_expandable": {
"container": "/rest/api/space/MYSPACE",
"metadata": "",
"operations": "",
"children": "/rest/api/content/567890123/child",
"restrictions": "/rest/api/content/567890123/restriction/byOperation",
"history": "/rest/api/content/567890123/history",
"ancestors": "",
"body": "",
"version": "",
"descendants": "/rest/api/content/567890123/descendant",
"space": "/rest/api/space/MYSPACE"
}
}
],
"start": 0,
"limit": 25,
"size": 2,
"_links": {
"self": "https://wiki.abc.com/rest/api/content/998877665/child/page"
}
},
"_links": {
"base": "https://wiki.abc.com",
"context": "",
"self": "https://wiki.abc.com/rest/api/content/998877665/child"
},
"_expandable": {
"attachment": "/rest/api/content/998877665/child/attachment",
"comment": "/rest/api/content/998877665/child/comment"
}
}
打字稿:WikiTree.ts
export interface WikiTree {
page: Page;
_links: Links;
_expandable: Expandable;
}
export interface Page {
results?: (ResultsEntity)[] | null;
start: number;
limit: number;
size: number;
_links: Links1;
}
export interface ResultsEntity {
id: string;
type: string;
status: string;
title: string;
extensions: Extensions;
_links: Links2;
_expandable: Expandable1;
}
export interface Extensions {
position: number;
}
export interface Links2 {
webui: string;
edit: string;
tinyui: string;
self: string;
}
export interface Expandable1 {
container: string;
metadata: string;
operations: string;
children: string;
restrictions: string;
history: string;
ancestors: string;
body: string;
version: string;
descendants: string;
space: string;
}
export interface Links1 {
self: string;
}
export interface Links {
base: string;
context: string;
self: string;
}
export interface Expandable {
attachment: string;
comment: string;
}
我想和基于它的服务的调用来填充children
阵列的父result.id
例如:呼叫将在维基服务,它返回一个可观察的功能。
this.wikiChildTree$ = this.wikiService.GetWikiHierarchy(result.id);
从wikiChildTree$
观察到返回的数据,我想创建title
和link
对象的数组。因此,对象的infoCards
阵列将反映这样一个JSON对象:
[{
"image": "",
"title": "Start here",
"titleLink": "/page/wiki/123456789",
"children": [{
"title": "Storm",
"link": "/page/wiki/660431"
},
{
"title": "Weather",
"link": "/page/wiki/660432"
}]
},
{
"image": "",
"title": "FAQ",
"titleLink": "/page/wiki/567890123",
"children": [{
"title": "Cloud",
"link": "/page/wiki/450433"
},
{
"title": "Sunshine",
"link": "/page/wiki/120432"
}]
}
]
这就像制作父子异步调用,让孩子的数据。
我看了一下forkjoin和mergemap,但不知道在这里实现。我怎么做?
所以基本上你应该能够做到这一点,如:
ngOnInit() {
this.wikiTree$ = this.wikiService.GetWikiHierarchy().pipe(
switchMap(data =>
forkJoin(data.page.results.map(result => this.wikiService.GetWikiHierarchy(result.id))).pipe(
map(children => ({data, children}))
)
)
).subscribe(({data, children}) => {
const newInfoCards = data.page.results.map((result, i) => (
{
"image": "",
"title": result.title,
"titleLink": "/page/wiki/"+ result.id,
"children": children[i]
}))
this.infoCards = [...this.infoCards,...newInfoCards]
},
(err) => {
console.log(err);
}
);
}
说明:
新增返回数据阿米尔的答案摆脱错误的。 map函数需要返回一个可观察的类型wikiTree的。
ngOnInit() {
this.wikiTree$ = this.wikiService.GetWikiHierarchy().pipe(
switchMap(data =>
forkJoin(data.page.results.map(result => this.wikiService.GetWikiHierarchy(result.id))).pipe(
map(children => ({data, children}))
)
)
).subscribe((data, children) => {
const newInfoCards = data.page.results.map((result, i) => (
{
"image": "",
"title": result.title,
"titleLink": "/page/wiki/"+ result.id,
"children": children[i]
}))
this.infoCards = [...this.infoCards,...newInfoCards]
return data
},
(err) => {
console.log(err);
}
);
}