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:
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; }); } }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
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