Angular 12 Observable<Object[]> 尝试执行 get 方法时出错

Question

我一直试图弄明白我在 Angular 12 上遇到的这个错误。

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到数组等 Iterables。

这是我的服务：

import { HttpClient } from '@angular/common/http';
import { Catalogo } from './../Models/Catalogo';
import { Observable } from 'rxjs';


const baseUrl = 'http://localhost:8080/'

@Injectable ({
 providedIn: 'root'
})

export class CatalogoService {

 constructor(private http: HttpClient) { }

 getAll(): Observable<Catalogo[]> {
   console.log(this.http.get<Catalogo[]>(baseUrl));
   return this.http.get<Catalogo[]>(baseUrl);
 }

这是我的组件：

import { Router } from '@angular/router';
import { CatalogoService } from './../../Services/catalogo.service';
import { Catalogo } from "./../../Models/Catalogo";
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})

export class CatalogoComponent implements OnInit {

  catalogo?: Catalogo[];
  currentCatalogo: Catalogo = {};
  currentIndex = -1;
  constructor(private catalogoService: CatalogoService) { }

  ngOnInit(): void {
    this.retrieveCatalogo();
  }

  retrieveCatalogo(): void {
    this.catalogoService.getAll()
      .subscribe(
        data => {
          this.catalogo = data;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  } 

编辑：这是 HTML 部分

<div class="containter">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">Id</th>
        <th scope="col">Modelo</th>
        <th scope="col">Precio</th>
        <th scope="col">Especificacion</th>
        <th scope="col">Imagen</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let catalogo of catalogo; let i = index">
        <th scope="row">{{catalogo.id}}</th>
        <td>{{catalogo.modelo}}</td>
        <td>{{catalogo.precio}}</td>
        <td>{{catalogo.especificacion}}</td>
        <td>{{catalogo.imagen}}</td>
      </tr>
    </tbody>
  </table>
</div>

我正在关注如何将可序列化与 MEAN 堆栈一起使用的教程：

https://www.bezkoder.com/angular-12-node-js-express-mysql/ https://www.bezkoder.com/angular-12-crud-app/

但是当我尝试加载页面时，我得到了我提到的错误。

我的问题是：

为什么会这样？ （我对 Angular 有点陌生）

这就是你应该如何返回一个带有 Observables 的数组吗？ "this.http.get(baseUrl);"

编辑：这是服务类方法的输出：

Observable
operator: MapOperator {thisArg: undefined, project: ƒ}
source: Observable
operator: FilterOperator
predicate: (event) => event instanceof HttpResponse
thisArg: undefined
[[Prototype]]: Object
call: ƒ call(subscriber, source)
constructor: class FilterOperator
[[Prototype]]: Object
source: Observable
operator: MergeMapOperator {concurrent: 1, project: ƒ}
source: Observable {_isScalar: false, _subscribe: ƒ}
_isScalar: false
[[Prototype]]: Object
_isScalar: false
[[Prototype]]: Object
_isScalar: false
[[Prototype]]: Object

编辑：订阅方法的输出

Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
closed: true
destination: SafeSubscriber
closed: true
destination: {closed: true, next: ƒ, error: ƒ, complete: ƒ}
isStopped: true
syncErrorThrowable: false
syncErrorThrown: false
syncErrorValue: null
_complete: undefined
_context: null
_error: error => { console.log(error); }
_next: data => {…}
_parentOrParents: null
_parentSubscriber: null
_subscriptions: null
[[Prototype]]: Subscriber
isStopped: true
syncErrorThrowable: true
syncErrorThrown: false
syncErrorValue: null
_parentOrParents: null
_subscriptions: null
[[Prototype]]: Subscription
complete: ƒ complete()
constructor: class Subscriber
error: ƒ error(err)
next: ƒ next(value)
unsubscribe: ƒ unsubscribe()
_complete: ƒ _complete()
_error: ƒ _error(err)
_next: ƒ _next(value)
_unsubscribeAndRecycle: ƒ _unsubscribeAndRecycle()
Symbol(rxSubscriber): ƒ [_internal_symbol_rxSubscriber__WEBPACK_IMPORTED_MODULE_2__.rxSubscriber]()
[[Prototype]]: Object

谢谢！

Answer 1

让我们简化事情以使其更容易。为了简化和提高性能，我建议您使用异步管道。让我给你看看。

首先在你的component.ts中你不需要retrieveCatalogo方法，我们将存储observable并通过异步管道直接在模板中使用它。

组件：

import { Router } from '@angular/router';
import { CatalogoService } from './../../Services/catalogo.service';
import { Catalogo } from "./../../Models/Catalogo";
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})

export class CatalogoComponent implements OnInit {
  
  // We use the $ at the end of the var name as a naming convention for storing observables and subscriptions.
  catalogos$!: Observable<Catalogo[]>;
  currentCatalogo: Catalogo = {};
  currentIndex = -1;
  constructor(private catalogoService: CatalogoService) { }

  ngOnInit(): void {
    // We call the service and store the observable
    this.catalogos$ = this.catalogoService.getAll();
  }

现在在您的组件模板中，我们需要使用异步管道

...
    <tbody *ngIf="catalogos$ | async as catalogos">
      <tr *ngFor="let catalogo of catalogos">
        <th scope="row">{{catalogo.id}}</th>
        <td>{{catalogo.modelo}}</td>
        <td>{{catalogo.precio}}</td>
        <td>{{catalogo.especificacion}}</td>
        <td>{{catalogo.imagen}}</td>
      </tr>
    </tbody>
...

异步管道将自动取消订阅 https://angular.io/api/common/AsyncPipe