Django 尝试区分'时出错；[对象对象]'；。只有数组和可重用项

我不知道为什么我会犯这个错误。它位于AppComponent.html:4中

尝试区分“[object]”时出错。只允许使用数组和iterables

app.component.html

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

应用程序模块.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');
      }
    );
  };
}

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


}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
@可注射（{providedIn:'root'}）
导出类ApiService{
baseurl=”http://127.0.0.1:8000“httpHeader=新的HttpHeaders（{'Content-Type'：'application/json'}）；
构造函数（私有http:HttpClient）{}
getAllMovies（）：可观察
{ 
返回this.http.get（this.baseurl+/movies/，{headers:this.httpHeader}）；
} 
}

---

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

当使用

*ngFor

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

同时，你能做的就是使用。这会让你的代码看起来像这样

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

电影


{{movie.title}

添加JSON后

查看您的JSON图片（请尝试使用代码片段而不是图像），您可以看到。这意味着上述解决方案不会令人惊讶地工作，但要记住，它对某些场景非常有用

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

电影


{{movie.title}

---

如文档所示，这将允许您对对象而不是数组使用

*ngfor

。这是commonModule的一部分。

api.service.ts

import{Injectable}来自“@angular/core”；从'@angular/common/http'导入{HttpClient，HttpHeaders}；从“rxjs”导入{Observable}@可注入（{providedIn:'root'}）导出类ApiService{baseurl=”http://127.0.0.1:8000“httpHeader=newhttpheaders（{'Content-Type'：'application/json'}）；构造函数（私有http:HttpClient）{}getAllMovies（）：可观察的{返回this.http.get（this.baseurl+'/movies/'，{headers:this.httpHeader}）；}

能否在getAllMovies订阅中添加

console.log（数据）

并报告订阅结果？sameBy在浏览器开发控制台中显示我所指的结果@虽然255它不起作用，但我在app.component.ts中更改了this.movies=数据；对this.movies=data.results；我从这里开始做教程，视频中的家伙不必像我一样制作，而且很有效，我不知道为什么，this.movies=data.results；或者上述方法可以起作用：-）