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

313
Views
Enfoque adecuado para Async Pipe

Estoy creando una aplicación Angular y tratando de usar la tubería async siempre que sea posible para manejar las suscripciones de Observable.

Todavía estoy exactamente seguro de cuándo y por qué debería usarlo, la mayoría de las veces he visto que si no necesito hacer ningún cambio en los datos que vienen, puedo usarlo y mostrar los datos como- es ; pero si necesito hacer algo con cualquier parte de los datos de antemano, debo suscribirme manualmente en mi código mecanografiado y manejar todo allí antes de mostrarlo.

Entonces, por ejemplo, si tengo una matriz de objetos y necesito manipular una cadena en una de las propiedades del objeto, sería mejor suscribirme manualmente, manejar la respuesta y luego mostrarla en mi plantilla.

¿Es correcta esta suposición?

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

He usado ambos tipos de observables dentro de los componentes y estas son mis razones (probablemente haya otras que desconozco):

Razones para usar un observable suscrito:

  1. Controlar la suscripción y baja de suscripciones de forma manual.
  2. Sincronizar la carga y manipulación de datos dentro de un componente antes del uso interno.
  3. Cuando los datos suscritos se usan internamente (no visualmente) dentro del componente, como un servicio o cálculos.

Razones para usar una tubería observable asíncrona:

  1. La suscripción y cancelación de suscripciones de observables se maneja automáticamente.
  2. Sincronizar la carga y manipulación de datos dentro de un componente antes de usarlo dentro de la plantilla HTML.
  3. Cuando hay una cantidad de elementos HTML que dependen de los datos suscritos y desea que las suscripciones se liberen automáticamente después de que se destruya el componente.

En ambos casos, puede cargar y manipular datos suscritos dentro de su componente antes de su uso.

A continuación se muestra un ejemplo de cada uno:

Basado en suscripción

TS

 someData: SomeClass[] = [ { id: 1, desc: 'One', data: 100 }, { id: 2, desc: 'Two', data: 200 }, { id: 3, desc: 'Three', data: 300 } ]; someData$: Observable<SomeClass[]>; this.someData$ = of(this.someData).subscribe((res) => { this.someData = res.map((r) => { r.data = Math.floor(r.data * 1.1); return r; }); });

Tubería observable asíncrona

TS

 ... someData: SomeClass[] = []; someData$: Subscription; this.someData$ = of(this.someData).pipe( map((res) => { res.map((r) => { r.data = Math.floor(r.data * 1.1); }); return res; }) );

HTML (para ambas opciones)

 <li *ngFor="let data of someData$ | async"> Item={{ data.desc }}. Value={{ data.data }} </li>

Para resumir, el uso de cualquiera de las opciones depende de la complejidad de su componente, su tipo (visual o no visual) y cómo le gustaría administrar la administración de memoria de las suscripciones.

La respuesta a la pregunta original es no, no es necesariamente mejor suscribirse manualmente cuando se trata de cálculos/procesamiento previo. También puede usar una canalización asíncrona para hacer lo mismo que mostré con los dos ejemplos equivalentes anteriores.

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!