そのような問題がありました、私は数日間苦しんでいます、私はまだかなりの初心者です。
ウィキペディアAPIへのGETリクエストを使用して、このオブジェクトを取得します
pagesオブジェクトの場合、プロパティの名前(これもオブジェクトです)は常にpageid(この場合は「9475」)と同じであることがわかります。オブジェクトの名前が事前にわからない場合、どうすればこのオブジェクトにアクセスできますか?
次に、ngForを使用できるように、このオブジェクトを配列に変換する必要があります。
search.component.tsのshowArticleInformationメソッドを使用して取得したこのオブジェクト
search.component.ts
import { Component, OnInit } from '@angular/core';
import { Article, ArticleInformation, ArticlesService } from '../../services/articles.service';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css'],
providers: [ArticlesService]
})
export class SearchComponent implements OnInit {
constructor(private articlesServices: ArticlesService) { }
searchQuery: string;
articles: { };
articleInformation: ArticleInformation;
getUrl(searchQuery: string) {
return 'https://ru.wikipedia.org/w/api.php?action=opensearch&profile=strict&search='
+ searchQuery + '&limit=100&namespace=0&format=json&origin=*';
}
getUrlInformation(searchQuery: string) {
return 'https://ru.wikipedia.org/w/api.php?action=query&titles='
+ searchQuery + '&prop=info&format=json&origin=*';
}
showArticles() {
this.articlesServices.getArticles(this.getUrl(this.searchQuery))
.subscribe(
(data: Article) => this.articles = Object.values({ ...data })
);
}
showArticleInformation() {
this.articlesServices.getArticleInformation(this.getUrlInformation(this.searchQuery))
.subscribe(
(data: ArticleInformation) => this.articleInformation = { ...data }
);
console.log(this.articleInformation);
}
ngOnInit() {
}
}
articles.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { retry } from 'rxjs/operators';
export interface Article {
title: string;
collection: string[];
description: string[];
links: string[];
}
export interface ArticleInformation {
batchComplete: string;
query: {
pages: { }
};
}
@Injectable({
providedIn: 'root'
})
export class ArticlesService {
constructor(private http: HttpClient) { }
getArticles(url) {
return this.http.get<Article>(url)
.pipe(
retry(3),
);
}
getArticleInformation(url) {
return this.http.get<ArticleInformation>(url)
.pipe(
retry(3),
);
}
}
あなたが特定のならそれはpages
、常に1つの特性を持つことになりますし、あなたはそれが唯一の必要value
、あなたが使用して、このような何かを行うことができますObject.values
:
const data = {
batchComplete: "",
query: {
pages: {
"9745": {
pageid: 9745,
length: 48,
lastrevid: 100,
contentmodel: "wikitext",
touched: "2019-02-01"
}
}
}
}
const articleInformation = {
...data,
query: {
pages: [Object.values(data.query.pages)[0]]
}
}
console.log(articleInformation)
ただし、構造が異なるinterface
ためthis.articleInformation
、とは別々にする必要がありますdata
。
このようなもの:
export interface ArticleInformationNew {
batchComplete: string;
query: {
pages: any[]
};
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加