从API (角)获取数据

Question

我需要通过提交按钮从API获取数据。

这是url -https://api.chucknorris.io/jokes/search?query=*

*是输入的值。

这是API的响应。

{
"total": 1,
"result": [
    {
        "category": null,
        "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
        "id": "cq6hLP0ETeW4VSrm7SYg5A",
        "url": "https://api.chucknorris.io/jokes/cq6hLP0ETeW4VSrm7SYg5A",
        "value": "Chuck Norris knows WAZZZUP!"
    }
]

}

我需要从结果中得到值并在视图中显示出来

正如您所看到的，是一个对象，而不是数组。

我试过这样做

模板码

<div class="container-fluid">
  <form class="form-inline" (ngSubmit)="search()" [formGroup]="searchForm" novalidate>
      <label for="text">Enter value:</label>
      <input formControlName="jokevalue" style="margin-left:20px;" type="text" class="form-control" id="email">
      <button style="margin-left:20px;" type="submit" class="btn btn-primary">Submit</button>
  </form>
  <div style="background: black; height: 60px;" *ngFor="let joke of jokes;index as i">
      <p style="color: white">{{i}}</p>
      <p style="color: white">{{joke.result[i].value}}</p>
  </div>

​

组件代码

   import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { finalize } from 'rxjs/operators';
import { Http, Headers, Response, URLSearchParams } from '@angular/http';
import { HttpClient } from '@angular/common/http';

import { environment } from '@env/environment';
import { Logger, I18nService, AuthenticationService } from '@app/core';

@Component({
  selector: 'app-testcomponent',
  templateUrl: './testcomponent.component.html',
  styleUrls: ['./testcomponent.component.scss']
})
export class TestcomponentComponent implements OnInit {
  public jokes: any;
  version: string = environment.version;
  error: string;
  searchForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private http: HttpClient
    ) {
    this.createForm();
   }

  ngOnInit() {}

  search() {
    this.http.get('https://api.chucknorris.io/jokes/search?query='+this.searchForm.value.jokevalue ).subscribe(
    data => [
      console.log(data),
      this.jokes = data

    ])
  }

  private createForm() {
    this.searchForm = this.formBuilder.group({
      jokevalue: ['', Validators.required],
    });
  }
}

但上面写着

无法找到“对象”类型的不同支持对象“对象对象”。NgFor只支持绑定到诸如数组之类的Iterable。

我怎么能。解决这个问题？

谢谢你帮忙。

Answer 1

笑话数组在data.result中。

this.jokes = data.result应该能工作。

Answer 2

您正在迭代响应对象，而不是响应对象中的结果。

在模板中更改此内容：*ngFor="let joke of jokes.result;index as i"

也可以将组件更改为：this.jokes = data.result