我正在尝试通过外部api从json数据中获取键值对，并使用angular和typescript显示它。我该如何实现？

Question

我想从我的api中获取结果对象中的每个键值对，以显示在前端。即（类别，类型，难度，问题，正确答案）我已经正确设置了服务和组件，我要做的就是获取json并显示每对。方法名称称为fetchQuestions，如下所示。我可以简单地以与fetchPeople相同的方式调用它来成功获取数据，但json格式不同，因此不会显示。然后我尝试了其他方法，但是那也不起作用。我该如何显示呢？

People.service

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

APIhttps://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean

   {
   "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>

Answer 1

HTTP GET很冷。这样，每个async都会触发一个单独的请求。此外，您实际上并没有从fetchQuestions()函数返回可观察值。订阅应被删除。

您还可以使用Angular HttpParams设置查询参数并以Angular的方式进行操作。

尝试以下操作

服务

HttpParams

模板

import { HttpClient, HttpParams } from '@angular/common/http';

fetchQuestions(): Observable<any> {
  const params = new HttpParams()
    .set('amount', '10')
    .set('difficulty', 'hard')
    .set('type', 'boolean');  
  return this.http.get('https://opentdb.com/api.php', { params: params })
    .pipe(map(res => res.results));
}

我也注意到一种小字体。

<ng-container *ngFor="let result of results$ | async">
  <ion-list>
    <ion-item>{{result.category}}</ion-item>
    <ion-item>{{result.question}}</ion-item>
    <ion-item>{{result.difficulty}}</ion-item>
    <ion-item>{{result.correct_answer}}</ion-item>
  </ion-list>
</ng-container>

实际上应该是result.questions。

有关冷热观测的更多详细信息：result.question

工作示例：https://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observables.html