[英]Angular Typescript changing Object property in array not updating view
[英]Changing an inner object property to an array in TypeScript
出现了这样的问题,我已经苦了几天,我还是一个新手。
使用对Wikipedia API的GET请求,我得到了这个对象
事实证明,对于页面对象,属性的名称(也是对象)始终等于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() {
}
}
article.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
将始终具有一个属性并且只需要它的value
,则可以使用Object.values
进行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)
但是,您需要为此this.articleInformation
和data
使用单独的interface
,因为它们具有不同的结构。
像这样:
export interface ArticleInformationNew {
batchComplete: string;
query: {
pages: any[]
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.