在我的angular应用程序中观察/订阅JokeAPI的应用程序接口调用时遇到问题

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class JokeService {
  private apiUrl = 'https://official-joke-api.appspot.com/random_joke';

  constructor(private http: HttpClient) {}

  getJoke(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

import { Component, OnInit } from '@angular/core';
import { JokeService } from './joke.service';

@Component({
  selector: 'app-joke',
  template: `<p>{{ joke }}</p>`
})
export class JokeComponent implements OnInit {
  joke: any;

  constructor(private jokeService: JokeService) {}

  ngOnInit() {
    this.jokeService.getJoke().subscribe(data => {
      this.joke = data.setup + ' ' + data.punchline;
    });
  }
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { JokeService } from './joke.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-joke',
  template: `<p>{{ joke }}</p>`
})
export class JokeComponent implements OnInit, OnDestroy {
  joke: any;
  private subscription: Subscription;

  constructor(private jokeService: JokeService) {}

  ngOnInit() {
    this.subscription = this.jokeService.getJoke().subscribe(data => {
      this.joke = data.setup + ' ' + data.punchline;
    });
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

"architect": {
  "serve": {
    "options": {
      "proxyConfig": "src/proxy.conf.json"
    }
  }
}

{
  "/api": {
    "target": "https://official-joke-api.appspot.com",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

private apiUrl = '/api/random_joke';