Angular Observable - 订阅但 html 不输出信息答案

【问题标题】：Angular Observable - Subscribe but html is not outputting the infoAngular Observable - 订阅但 html 不输出信息
【发布时间】：2020-05-24 03:22:10
【问题描述】：

我想了解为什么我的 API 调用给了我一个错误并且不会在 HTML 中显示列表？当我第一次尝试调试它时。它告诉我“漫游者：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>

【问题讨论】：

转到网络选项卡 --> XHR 并检查响应。可能数组在对象内部。
谢谢。它是嵌套的。那部分对我有帮助:)

标签： angular angular-httpclient angular-observable

【解决方案1】：

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

Angular ngFor 只支持遍历数组。

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

【讨论】：

谢谢。就是这样。我仔细查看了响应，它是嵌套的。我所要做的就是 this.rovers = rovers["rovers"]。它是嵌套的。

【解决方案2】：

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

【讨论】：