Javascript 在TypeScript中将内部对象属性更改为数组

有这样一个问题，我已经痛苦了两天，我还是一个新手

使用对WikipediaAPI的GET请求，我得到

事实证明，对于pages对象，属性的名称（也是一个对象）始终等于pageid（在本例中为“9475”）。如果我事先不知道该对象的名称，如何访问该对象

然后必须将此对象转换为数组，以便可以使用ngFor

我使用search.component.ts中的showArticleInformation方法获取此对象

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() {
  }
}

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),
      );
  }
}

搜索.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() {
  }
}

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),
      );
  }
}

文章.服务.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() {
  }
}

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),
      );
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/operators”导入{retry}；
导出接口文章{
标题：字符串；
集合：字符串[]；
说明：字符串[]；
链接：字符串[]；
}
导出接口信息{
batchComplete：字符串；
查询：{
页面：{}
};
}
@注射的({
providedIn:'根'
})
出口类物品服务{
构造函数（私有http:HttpClient）{}
getArticles（url）{
返回此.http.get（url）
.烟斗(
重试（3），
);
}
getArticleInformation（url）{
返回此.http.get（url）
.烟斗(
重试（3），
);
}
}

如果您确定

页面

始终有一个属性，并且只需要它的

值

，则可以使用以下方法执行类似操作：

const数据={
批处理完成：“”，
查询：{
页码：{
"9745": {
页码：9745，
长度：48，
最后修订日期：100，
contentmodel:“wikitext”，
感动：“2019-02-01”
}
}
}
}
常量信息={
…数据，
查询：{
页面：[对象.值（数据.查询.页面）[0]]
}
}
console.log（articleInformation）

如果您确定

页面

将始终具有一个属性，并且只需要它的

值

，则可以使用以下方法执行类似操作：

const数据={
批处理完成：“”，
查询：{
页码：{
"9745": {
页码：9745，
长度：48，
最后修订日期：100，
contentmodel:“wikitext”，
感动：“2019-02-01”
}
}
}
}
常量信息={
…数据，
查询：{
页面：[对象.值（数据.查询.页面）[0]]
}
}
console.log（articleInformation）

“那么必须将此对象转换为数组”。您可以发布转换后的输出是什么样子的吗？像这样？：

{batchComplete:string；query:{pages:[{pageid，ns，length}]}；}

@adiga我想是这样的

{batchComplete:string；query:{pages:[pageid，ns，length]}

一般来说，我只需要从整个对象中得到一个由两个值组成的数组：

[length，toucted]

。“那么这个对象必须转换成一个数组”。你能发布转换后的输出是什么样子吗？像这样吗？：

{batchComplete:string；query:{pages:[{pageid，ns，length}}；}

@adiga我想是这样

{batchComplete:string；query:{pages:[pageid，ns，length]}

通常，我只需要从整个对象获取一个由2个值组成的数组：

[长度，触摸]

。