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

Posted 2023-02-22

【中文标题】尝试区分“[object Object]”时出错。只有数组和可迭代

【英文标题】：Error trying to diff '[object Object]'. Only arrays and iterables

【发布时间】：2019-08-08 04:02:08

【问题描述】：

我不知道为什么会出现此错误。它在 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);
 

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

【问题讨论】：

api.service.ts 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);

你能在你的getAllMovies订阅中添加console.log(data)并报告它的结果吗？

imgur.com/a/c99ruGn 相同

通过显示我的浏览器开发控制台的结果。

imgur.com/a/CMrtFI9@alt255

【参考方案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 的一部分。

【讨论】：

它不起作用，我在 app.component.ts 中更改了 this.movi​​es = data;到 this.movi​​es = data.results;并且它的工作我是从这里youtube.com/watch?v=z_H-oxQVsPw 做的教程，视频中的人不必像我一样，它仍然有效，不知道为什么

是的，this.movi​​es = data.results;或以上将工作:-)