• Empleos
  • Sobre nosotros
  • Empleos
    • Inicio
    • Empleos
    • Cursos y retos
  • Empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Contrata talento tech
    • Blog
    • Comercial
    • Calculadora de salario

0

379
Vistas
¿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í

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

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; }); } }
about 4 years ago · Santiago Trujillo Denunciar

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

about 4 years ago · Santiago Trujillo Denunciar

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

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda