Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

394
Views
¿Cómo convertir un retorno Observable en una matriz de objetos de mi clase en Typescript?

Tengo un punto final que devuelve un Observable<Operacao[]> , pero necesito una matriz de Operacao[] . ¿Cómo convertir este retorno para obtener una matriz de Operacao?

Este es mi punto final:

 obterOperacoes(): Observable<Operacao[]> { let operacoes = this.http .get<Operacao[]>(this.UrlServiceV1 + 'operacoes', super.ObterAuthHeaderJson()) .pipe(catchError(super.serviceError)); return operacoes; }

Ps: Operacao es una clase de mecanografiado simple.

Cuando inspecciono lo que hay en operacoes, lo que encuentro es esto:

ingrese la descripción de la imagen aquí

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Primero debe suscribirse a su observable. A continuación, asigne la matriz que obtiene de http get a sus variables operacoes y luego devuelva variables operacoes .

Esta es una mala solución, pero es la solución que desea. ¿Porque es malo? Porque es posible que obtenga una matriz vacía debido a la asincronía en JavaScript, como lo señala @Carsten a continuación.

 obterOperacoes(): Operacao[] { let operacoes = new Array<Operacao>(); this.http.get<Operacao[]>( this.UrlServiceV1 + 'operacoes', super.ObterAuthHeaderJson() ) .pipe(catchError(super.serviceError)) .subscribe((res) => { operacoes = res; }); return operacoes; }

Le sugiero que coloque sus llamadas API dentro de un servicio para devolver el observable y luego suscriba el servicio desde su archivo component.ts. Vea la muestra a continuación:

muestra.servicio.ts

 import { Injectable } from '@angular/core'; ... @Injectable() export class SampleService { constructor() { } obterOperacoes(): Operacao[] { return this.http.get<Operacao[]>( this.UrlServiceV1 + 'operacoes', super.ObterAuthHeaderJson() ) .pipe(catchError(super.serviceError)); } }

componente.ts

 export class MyComponent { operacoes: Operacao[] = []; constructor(private sampleSrvc: SampleService ){ this.myServices.sayHello(); } getOperacao() { this.sampleSrvc.obterOperacoes().subscribe((res) => { this.operacoes = res; }); } }
over 4 years ago · Santiago Trujillo Report

0

haz estas cosas

Paso 1: marque la clase @Injectable()

 @Injectable() export class Operacao {

Paso 2: inyecte esa dependencia en el constructor()

 export class MyComponent implements OnInit { // ... operacoes: Operacao[] = []; constructor(private operacao: Operacao) {} // ... }

Paso 3: suscríbase al Observable en el componente como este

 this.operacao.obterOperacoes().subscribe((result) => { this.operacoes = result; });

Documentación: Inyección de dependencia en Angular

over 4 years ago · Santiago Trujillo Report

0

Suscribirse a lo observable es la solución correcta. Sin embargo, se debe tener cuidado para evitar pérdidas de memoria. Esto sucede cuando se permite que se destruya un componente sin limpiar las suscripciones existentes.

Si está utilizando los resultados de una suscripción en una plantilla, puede usar la canalización asíncrona para suscribirse automáticamente y luego destruir automáticamente la suscripción en la destrucción del componente.

 <div *ngFor="let obterOperaco of obterOperacoes | async"> {{ obterOperaco }} </div>

Si prefiere usar esto en el archivo ts del componente, deberá manejar la destrucción manualmente.

 obterOperacoes().pipe( takeUntil(/*an observable that is complete onNgDestroy*/) ).subscribe(obterOperaco => {})

Lectura adicional sobre cómo darse de baja aquí: https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f

Me gusta usar una biblioteca para manejar el modelo de destrucción y recomiendo usar https://www.npmjs.com/package/@ngneat/until-destroy

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!