我有一个Angular组件,它订阅了由Angular服务返回的可观察对象。
组件: help.component.ts
import { WikiService } from '../../../services/wiki.service';
import { WikiTree } from '../../../interfaces/WikiTree';
export class HelpComponent implements OnInit {
wikiTree$: Observable<WikiTree>
public infoCards: Array<Object>;
constructor(private wikiService: WikiService) {}
ngOnInit() {
this.wikiTree$ = this.wikiService.GetWikiHierarchy();
this.wikiTree$.subscribe(()=>{
//TODO: Create infoCards array by iterating through the results array inside the wikiTree observable.
}
}
}
wikiTree$
的Observable具有转换为TypeScript的以下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"
}
}
TypeScript: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;
}
我想遍历Subscribe方法中可观察到的wikiTree$
中的“ page”->“ results”数组,并创建一个名为infoCards
的对象数组,如在此组件中定义的那样JSON,其中某些值来自wikiTree$
可观察。 :
[{
"title": "Start here",
"titleLink": "/page/wiki/123456789",
"children": []
},
{
"title": "FAQ",
"titleLink": "/page/wiki/567890123",
"children": []
}
]
我该怎么做?
更新:
InfoCard组件
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-info-card',
templateUrl: './info-card.component.html',
styleUrls: ['./info-card.component.css']
})
export class InfoCardComponent implements OnInit {
@Input('infoCard') infoCard: Array<Object>;
constructor() { }
ngOnInit() {
}
}
答案 0 :(得分:1)
如果我要面对这个问题,那么我将如下解决:
首先,我将为您的 WikiTree.ts 中的模型创建一个模型(类),用于InfoCard。我将其设为Class
,以便在订阅方法内部创建对象-
export class InfoCard{
title: string;
titleLink: string;
children: string;
}
之后,在 Component:help.component.ts 中,我将这样声明infoCard-
infoCards: InfoCard[]=[];
很明显,您必须从 WikiTree.ts -
导入 InfoCardimport { InfoCard} from '../../../interfaces/WikiTree';
然后在subscription方法中,我将映射为Observable-的数据
this.wikiTree$.subscribe(data =>{
data.page.results.map(
result=>{
let newInfoCard = new InfoCard();
newInfoCard.title = result.title;
newInfoCard.children= result._expandable.children;
newInfoCard.titleLink= result._links.self;
this.infoCards = [this.infoCards, ...newInfoCard]
}
)
}
添加了组件部分后,您也可以尝试执行此操作-
初始化数组-
infoCards: Array<Object>= new Array();
可能会有更多选择来完成它。我在分享我的。如果您什么都不懂,或者有任何疑问或我所犯的错误,请告诉我。
forkJoin(
this.wikiService.GetWikiHierarchy(),
this.wikiService.GetWikiChildren()
).subscribe(([data, children]) => {
data.page.results.map(
result => {
this.infoCards.push({
'title': result.title,
'titleLink': result._links.self,
'children': children.whatEver
});
}
)
});
并且,如果子级呼叫取决于先前的服务呼叫,则可以尝试类似以下操作-
this.wikiService.GetWikiHierarchy().subscribe(
data=>{
data.page.results.map(
result=>{
this.wikiService.GetWikiChildren(result.id).subscribe(
child=>{
this.infoCards.push({
'title': result.title,
'titleLink': result._links.self,
'children': child.whatEver
});
}
)
}
)
}
)
答案 1 :(得分:1)
以下订阅将在输入新数据时根据您提供的结构创建新对象。我假设您仅需要指定格式的title和titleLink,并且children
数组是从另一服务派生的? / p>
this.wikiTree$.subscribe( res => {
const newInfoCards = res.page.results.map(result => ({
"title": result.title,
"titleLink": "/page/wiki/"+ result._links.self.split('/').pop(),
"children": []
}),
this.infoCards.concat(newInfoCards);
})