在 Angular 中使用 Observables 显示数据时出错

Question

我的 Angular 项目中有这项服务

getOfertas(): Observable<Oferta[]> {
return this.http.get<Oferta[]>(`${this.urlWebAPI}/ofertas`)
  .pipe(
    tap(data=>console.log('OfertasService-get(): ', data)
    ),
    catchError(this.handleError)
  )

}

我在 Angular Component.ts

中使用

ofertas:Oferta[]=[];

ngOnInit(): void {
 this.dataService.getOfertas()
.pipe(
  tap(item=>console.log(item))
 )
.subscribe(
  data=>{
    this.ofertas=data;
    this.ofertasOriginal=this.ofertas;
  }
 )
,err=>console.log(err),
()=>{};
}
}

我想在我的 table 里面看到结果 Component.html

<div class='table-responsive'>
      <table class='table'>
        <thead>
          <tr>
            <th>Id</th>
            <th>Id Presentada</th>
            <th>Descripción</th>
            <th>Organismo</th>
            <th>Fª Presentación</th>
            <th>Presupuesto</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let oferta of ofertas; let index=index">
            <td>{{oferta.id}}</td>
            <td>{{oferta.idPresentada}}</td>
            <td>{{oferta.descripcion}}</td>
            <td>{{oferta.id}}</td>
            <td>{{oferta.fechaPresentacionFulcrum}}</td>
            <td>{{oferta.id}}</td>
          </tr>
        </tbody>
      </table>
    </div>

但是我在控制台中使用从 ASP.NEt Core web API 获得的数据得到了这个结果，但是错误显示

在我的 Web API 中，当我调试时，我看到返回了这个结果。

即 Oferta 对象列表

但是在Angular中，我得到了一个奇怪的对象

{$id:
 $values:[]
}

但是如果我使用这个 ~$values 进行迭代，我仍然什么也看不到

<tr *ngFor="let oferta of ofertas.$values; let index=index">

如果我尝试分配这个

我想使用我的 ofertas 变量 ofertas:Oferta[]=[]

这里我有一个同样问题的例子； https://stackblitz.com/edit/angular-ivy-ymtnrw?file=src/app/app.component.html

有什么想法吗？

谢谢

Answer 1

响应本身不是一个数组，但包含一个数组。

您需要将模板更改为

<tr *ngFor="let oferta of ofertas.$values; let index=index">

Answer 2

就像在我的 Web API 中一样，我必须避免循环对象错误，我按照 Felipe 在他的博客中解释的那样这样做：https://gavilanch.wordpress.com/2021/05/19/corrigiendo-el-error-a-possible-object-cycle-was-detected-en-distintas-versiones-de-asp-net-core/?blogsub=confirming#subscribe-blog

但正如他自己告诉我的那样，这一定是为什么现在我在该对象中收到 Angular 中的值，而第二个属性中的数组，所以现在我必须调整我的Angular 该结构的模型

新模型

import { Oferta } from './oferta';

export interface OfertaModel{
  $id:string;
  $values:Oferta[];

}

service.ts

getOfertas(): Observable<OfertaModel> {
return this.http.get<OfertaModel>(`${this.urlWebAPI}/ofertas`)
  .pipe(
    tap(data => console.log('OfertasService-getOfertas(): ', data)
    ),
    catchError(this.handleError)
  )

}

component.ts

this.dataService.getOfertas()
.pipe(
  tap(item=>console.log(item))
)
.subscribe(
  data=>{
    this.ofertas=data.$values;
  }
)
,err=>console.log(err),
()=>{};

component.html

<tr *ngFor="let oferta of ofertas; let index=index">

谢谢

在 Angular 中使用 Observables 显示数据时出错

Error showing data with Observables in Angular

asp.net-web-api

asp.net-core

angular