尝试区分“[object Object]”时出错。只有数组和可迭代

Question

我不知道为什么会出现此错误。它在 AppComponent.html:4 中

尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象

app.component.html

<h2>Movies</h2>
<ul>
  <li *ngFor='let movie of movies'>
    <h2>{{movie.title}}</h2>
  </li>
</ul>

app.component.ts

import {Component} from '@angular/core';
import {ApiService} from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ApiService]
})
export class AppComponent {
  movies = [{title: 'test'}];

  constructor(private api: ApiService) {
    this.getMovies();
  }

  getMovies = () => {
    this.api.getAllMovies().subscribe(
      data => {
        this.movies = data;
      },
      error1 => {
        console.log('error');
      }
    );
  };
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里是服务

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

@Injectable({ providedIn: 'root' })
export class ApiService { 

baseurl = "http://127.0.0.1:8000"; httpHeader = new HttpHeaders({'Content-Type': 'application/json'});
constructor(private http: HttpClient) {} 

getAllMovies(): Observable<any>
{ 
    return this.http.get(this.baseurl + '/movies/', {headers: this.httpHeader});
} 


}

你能告诉我我做错了什么吗？

Answer 1

当使用*ngFor 时，您只能使用数组/可迭代对象，我可以想象这里发生的是您的 API 调用正在返回一个对象。您应该找到一种方法将其更改为数组以使现有模板正常工作。提供您的回复应该会有所帮助。

与此同时，您可以使用keyvalue pipe。这会让你的代码看起来像这样。

<h2>Movies</h2>
<ul>
  <li *ngFor='let movie of movies | keyvalue'>
    <h2>{{movie.title}}</h2>
  </li>
</ul>

添加 JSON 后

查看您可能拥有的 JSON 图片（请尝试使用 sn-ps 而不是图片）。这意味着上述解决方案不会非常有效，但值得记住的是它对某些场景很有用。

<h2>Movies</h2>
<ul>
  <li *ngFor='let movie of movies.results'>
    <h2>{{movie.title}}</h2>
  </li>
</ul>

如文档所示，这将允许您将*ngfor 与对象一起使用，而不是数组。这是 commonModule 的一部分。