Angular Observable - 订阅但 html 没有输出信息

Question

我想了解为什么我的 API 调用给我一个错误并且不会在 HTML 中显示列表？当我第一次尝试调试它时。它告诉我 "rovers: IRover[];" 未定义。如果我有一个调用 getRovers() 的按钮，当我调试它时，我可以看到来自 json 的信息数组。请参阅附件中的错误消息。

Error Message From Browser

1) rover.ts

export interface IRover {
    id: number,
    name: string
}

2) rovers.component.ts

import { Component, OnInit } from '@angular/core';
import { IRover } from './rover';
import { RoversService } from './rovers.service';

@Component({
  selector: 'app-rovers',
  templateUrl: './rovers.component.html',
  styleUrls: ['./rovers.component.css'],
  providers: [RoversService]
})
export class RoversComponent implements OnInit {

  rovers: IRover[];

  constructor(private roversService: RoversService) {}

  ngOnInit(): void {
    this.getRovers();
  }

  getRovers(): void {
    this.roversService.getRovers().subscribe(rovers => (this.rovers = rovers));
  }

}

3) rovers.service.ts

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

@Injectable()
export class RoversService {
    roversUrl = 'https://api.nasa.gov/mars-photos/api/v1/rovers?api_key=PRIVATEKEY';

    constructor(private http: HttpClient) {}

    /**GET rovers from nasa api */
    getRovers(): Observable<IRover[]> {
        return this.http.get<IRover[]>(this.roversUrl);
    }
}

4) rovers.component.html

<p>rovers works!</p>

<div *ngFor="let rover of rovers">
    <div>
        {{rover.id}} : {{rover.name}}
    </div>
</div>

Answer 1

看起来您的 API 响应对象而不是数组。

Angular ngFor 只支持遍历数组。

您需要以某种方式将您的响应转换为数组。

Answer 2

在 ngOnInit() 中调用您的服务并在那里订阅，并摆脱组件中对 getRovers() 的其他调用。

Angular Observable - 订阅但 html 没有输出信息

Angular Observable - Subscribe but html is not outputting the info

angular

angular-observable

angular-httpclient