Javascript 当尝试使用httpClient和angular 8显示api中的单个项时，是否有修复程序？

我正在尝试从中提取单个数据项“ “api。我使用httpClient和angular中的服务组件来提取数据，但由于某些原因，我无法显示数据。我使用控制台日志显示响应，但输出未定义

这是应用程序组件

import {Component, OnInit} from '@angular/core';
import { ApiService } from './api.service';
import { Jokes } from './jokes';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: Jokes;

  constructor(public apiService: ApiService) {}

  title = 'Dry jokes';

  ngOnInit() {
    this.loadJokes();
  }

  loadJokes() {
    // tslint:disable-next-line: no-debugger
    this.apiService.getJokes().subscribe((res: Jokes) => {this.data = res; });
    console.log(this.data);
  }
}

这是我们的服务

import {
  Injectable
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';
import {
  Observable,
  throwError,
  ObservableInput
} from 'rxjs';
import {
  retry,
  catchError
} from 'rxjs/operators';
import { Jokes } from './jokes';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}
  url = 'https://api.icndb.com/jokes/random';

 getJokes() {
   return this.http.get<Jokes>(this.url).pipe(retry(1), 
     catchError(this.errorHandl));
 }

 errorHandl(error) {
   let errorMessage = '';
   if (error.error instanceof ErrorEvent) {
     // Get client-side erro
     errorMessage = error.error.message;
   } else {
     // Get server-side error
     errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
   }
   console.log(errorMessage);
   return throwError(errorMessage);
  }
}

---

当我尝试使用ng for进行迭代时，会出现以下错误：“找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到诸如数组之类的Iterables。”

在代码中看不到NgFor，但您只能在数组上使用NgFor，并且此处的响应数据不是数组。在本例中，数据未显示的原因是您没有访问正确的属性：

{{data?.value.joke}}

检查返回的对象，它的相关结构是

{
  success: string;
  value: {
    id: number;
    joke: string;
    category: string[];
  }
}

---

在代码中看不到ngFor，但只能在数组中使用ngFor，并且这里的响应数据不是数组。在本例中，数据未显示的原因是您没有访问正确的属性：

{{data?.value.joke}}

检查返回的对象，它的相关结构是

{
  success: string;
  value: {
    id: number;
    joke: string;
    category: string[];
  }
}

---

“console.log（this.data）；”将在订阅结果之前执行；将控制台日志放在“this.data=res；”之前，这样做不起作用！我仍在“定义”您的代码不包含“ngFor”。数据不是数组；它应该声明为笑话[]。“console.log（this.data）；”将在订阅结果之前执行；将控制台日志放在“this.data=res；”之前，这样做不起作用！我仍在“定义”您的代码不包含“ngFor”。数据不是数组；它应该声明为笑话[]。那么如何将输出更改为数组？那么如何将输出更改为数组？