从API获取数据（角度）

Question

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

这是网址-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!"
    }
]

}

我需要从结果中获取价值并将其显示在View中

如您所见，它是一个对象，而不是array。

我试图这样

模板代码

<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仅支持绑定到Iterables，例如数组。

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

感谢帮助。

Answer 1

笑话数组位于中data.result。

this.jokes = data.result 应该管用。