Angular 角度可观察-订阅，但html不输出信息

我试图理解为什么我的API调用给我一个错误，并且不会以HTML显示列表？ 当我第一次尝试调试它时。它告诉我“漫游者：IRover[]；”是未定义的。如果我有一个调用getRovers（）的按钮，当我调试它时，我可以看到json中的信息数组。有关错误消息，请参阅附件

1） 罗孚公司

2） 路虎

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） 漫游者服务

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);
    }
}

从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{Observable}；
从“/rover”导入{IRover}；
从“@angular/core”导入{Injectable}；
@可注射（）
出口级漫游服务{
漫游者https://api.nasa.gov/mars-photos/api/v1/rovers?api_key=PRIVATEKEY';
构造函数（私有http:HttpClient）{}
/**从nasa api获取漫游者*/
getRovers（）：可观察{
返回this.http.get（this.roversUrl）；
}
}

4） rovers.component.html

<p>rovers works!</p>

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

路虎车有效

{{rover.id}}:{{rover.name}

看起来您的API使用对象而不是数组进行响应

Angular

ngFor

仅支持对数组进行迭代

---

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

在ngOnInit（）中调用您的服务，并在那里订阅，然后取消对组件中getRovers（）的另一个调用

转到网络选项卡-->XHR并检查响应。可能数组在一个对象内。谢谢。它是嵌套的。那部分帮助了我：）谢谢。就是这样。我仔细看了一下响应，发现它是嵌套的。我所要做的就是这个。它是嵌套的。

<p>rovers works!</p>

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