我想从我的 api 获取结果对象中的每个键值对以显示在我的前端上。即（类别、类型、难度、问题正确答案）我已正确设置服务和组件，我需要做的就是获取 json 并显示每一对。该方法名称称为 fetchQuestions，如下所示。我只需简单地以与 fetchPeople 相同的方式调用它就可以成功获取数据，但 json 格式不一样，所以它没有显示。然后我尝试了其他方法，但这也不起作用。我怎样才能实现这个显示？
人民服务
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class PeopleService {
constructor(private http: HttpClient) { }
//this works like a charm as it is just a simple array
fetchPeople(): Observable <Object> {
return this.http.get('/assets/data/people.json')
}
// this doesn't work as the json from the api below is in a different
// json format. Plus I need to return all value pairs
fetchQuestions(): Observable <Object> {
return this.http.get('https://opentdb.com/api.php?
amount=10&difficulty=hard&type=boolean').map(res =>
res.json().results).subscribe(data => {
console.log(data););
}
}
API
{
"response_code": 0,
"results": [
{
"category": "Vehicles",
"type": "boolean",
"difficulty": "hard",
"question": "In 1993 Swedish car manufacturer Saab experimented
with replacing the steering wheel with a joystick in a Saab 9000.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "History",
"type": "boolean",
"difficulty": "hard",
"question": "Japan was part of the Allied Powers during World War
I.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "History",
"type": "boolean",
"difficulty": "hard",
"question": "The Kingdom of Prussia briefly held land in Estonia.",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Science: Mathematics",
"type": "boolean",
"difficulty": "hard",
"question": "The binary number "101001101" is equivalent
to the Decimal number "334"",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Entertainment: Video Games",
"type": "boolean",
"difficulty": "hard",
"question": "TF2: Sentry rocket damage falloff is calculated based
on the distance between the sentry and the enemy, not the engineer
and the enemy",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Entertainment: Video Games",
"type": "boolean",
"difficulty": "hard",
"question": "The names of Roxas's Keyblades in Kingdom Hearts
are "Oathkeeper" and "Oblivion".",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "Entertainment: Music",
"type": "boolean",
"difficulty": "hard",
"question": "The band STRFKR was also briefly known as Pyramiddd.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "Entertainment: Books",
"type": "boolean",
"difficulty": "hard",
"question": "Harry Potter was born on July 31st, 1980.",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
},
{
"category": "Entertainment: Japanese Anime & Manga",
"type": "boolean",
"difficulty": "hard",
"question": "Druid is a mage class in "Log Horizon".",
"correct_answer": "False",
"incorrect_answers": [
"True"
]
},
{
"category": "Geography",
"type": "boolean",
"difficulty": "hard",
"question": "The two largest ethnic groups of Belgium are Flemish and Walloon. ",
"correct_answer": "True",
"incorrect_answers": [
"False"
]
}
]
}
People.page.ts
import { Component, OnInit } from '@angular/core';
import { PeopleService } from './../../providers/people.service'
@Component({
selector: 'app-people',
templateUrl: './people.page.html',
styleUrls: ['./people.page.scss'],
})
export class PeoplePage implements OnInit {
people$;
results$;
constructor(private peopleService:PeopleService) { }
fetchPeople(){
this.people$ = this.peopleService.fetchPeople();
}
fetchQuestions(){
this.results$ = this.peopleService.fetchQuestions()
}
ngOnInit() {
}
}
People.page.html
<ion-toolbar>
<ion-title>people</ion-title>
</ion-toolbar>
</ion-header>
<ion-button (click) ="fetchPeople()" color="primary">Primary</ion-
button>
<ion-list>
<ion-item *ngFor="let person of people$ | async">{{person.name}}.
</ion-item>
</ion-list>
<ion-button (click) ="fetchQuestions()"
color="primary">Secondary</ion-button>
<ion-list>
<ion-item *ngFor="let result of results$ | async">.
{{result.category}}</ion-item>
<ion-item *ngFor="let result of results$ | async">
{{result.questions}}</ion-item>
<ion-item *ngFor="let result of results$ | async">
{{result.difficulty}}</ion-item>
<ion-item *ngFor="let result of results$ | async">
{{result.correct_answer}}</ion-item>
</ion-list>
<ion-content>
<ion-button color="primary">Primary</ion-button>
</ion-content>
