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图片（请尝试使用片段而不是图像）。这意味着上述解决方案将无法正常运行，但在某些情况下很有用。

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

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

尝试与'[object Object]'进行比较时出错。仅数组和可迭代

1 个答案: