[Angular 10][Rxjs] How come the second pipe is not activating?

I am facing an issue where I have two subscribers to the same Observable, but the second one is not emitting any values. Could there be a limitation within the pipe that I am unaware of?

component.ts

  private readonly destroyed$ = new Subject<void>();

  public readonly vm$ = this.service.vm$.pipe(
    tap(console.log),
    takeUntil(this.destroyed$)
  );

  public readonly labels$ = this.service.vm$.pipe(
    zip(this.makeLabels),
    tap(console.log),
    takeUntil(this.destroyed$)
  )

  ...
  constructor(private readonly service: SomeService) {
    this.service.load();
  }

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

some.service.ts

  export class SomeService implements OnDestroy {
    private readonly destroyed$ = new Subject<void>();
    private _vm$ = new BehaviorSubject<ViewModel>(null);
    public readonly vm$ = this._vm$.asObservable().pipe(takeUntil(this.destroyed$));
    ...
    load() { this._vm$.next({...}) }
  }

component.html

<ng-container *ngIf="vm$ | async as vm">
  <header>
    <pre *ngFor="let label of labels$ | async">
       {{label | json}} 
    </pre>
  </header>
</ng-container>

Answer №1

The resolution required shifting

*ngFor="let label of labels$ | async"
from pre to a higher-level ng-container.

<ng-container *ngIf="vm$ | async as vm">
  <header>
    <ng-container *ngFor="let label of labels$ | async">
      <pre>
         {{label | json}} 
      </pre>
    </ng-container>
  </header>
</ng-container>

For some reason, this adjustment resolved the issue. Perhaps someone can elaborate on why.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establishing pathways in Angular 2

I'm currently working on configuring a route so that whenever I visit http://localhost:8080/user/beta/, it will redirect to http://localhost:8080/user/beta/#spreadsheet. The goal is to display the spreadsheet view, but instead of achieving that result ...

Troubleshooting issue with @Input not updating model in parent component in Angular 2

The scenario I am facing involves entities that own a Pessoa, with one of them being an Administrador. To handle this, I created a component to encapsulate the Pessoa data on CRUD forms. I linked the administrador.pessoa property to my new PessoaFormCompon ...

How can one break down enum values in typescript?

I've defined an enum in TypeScript as shown below: export enum XMPPElementName { state = "state", presence = "presence", iq = "iq", unreadCount = "uc", otherUserUnreadCount = "ouc", sequenc ...

How to adjust the font size in the Angular Material Select Panel?

One way to customize the appearance of a panel in CSS is by using the panelClass attribute. <mat-form-field appearance="fill"> <mat-label>Toppings</mat-label> <mat-select [formControl]="toppings" panelClass=&quo ...

Issue encountered while authenticating client secret from backend for newly created Stripe subscription

There seems to be an issue with confirming the client secret sent from the express backend to the frontend, specifically in a React Native-based mobile application. The clientSecret is being sent in the same manner as described above. On the frontend Rea ...

Problem with Angular's command line interface

I'm facing an unusual issue with angular/cli on my Windows machine. A year back, I installed Angular and created a new project successfully. I've been updating Angular whenever a new version is released (currently on v7). Today, when trying to cr ...

Error Encountered when Deploying Angular App on Heroku - Issue with Application, H10 Status Code

I have been struggling to deploy my Angular 7 application on Heroku for a few days now and keep running into Application errors even after a successful build. I recently realized that I had the entire /dist folder in .gitignore, so I removed it, but the ap ...

The state in React's useState and useEffect seems to lag behind by one step

Understanding that updates to state are asynchronous and batched for performance reasons, I made the decision to utilize useState() and useEffect() in order to synchronize with my state before taking action. However, I encountered a problem where my state ...

What is the most effective way to loop through a JSON object and apply filtering based on user input?

I am currently working with a dataset stored in a MongoDB database, and below is the format of the data. I have been looking for something similar to streams functionality in Java but haven't had any luck. Data from the Database: [ { &quo ...

The Angular 2 service is not transmitting the POST data in the correct format, although it functions properly when transmitted through PostMan

When the POST data is transmitted from the Angular 2 service in this manner: const data = new FormData(); data.append('date', '12/01'); data.append('weight', '170'); return this.http.post(this.u ...

Integrating HttpInterceptor with HttpModule

Within my Angular project (version 5), I have been utilizing the Http module from @angular/http to handle HTTP requests. I have been adding headers in the following manner: getHeaders(){ let headers = new Headers(); headers.append('authorization& ...

Tips on preventing pooling in Angular 5

service.ts: // Fetch all AgentLog logs using pooling method getAgentLogStream(): Promise<string> { const url = `${this.testCaseUrl}/logfile`; return Observable .interval(5000) .flatMap((i)=> this.http.get(url).toPromise().then(respons ...

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

Using TypeScript to access native functions in react-native

Recently, I found myself in need of a basic function to interact with native code. Rather than creating a package, I opted to create the Java files as if they were for a plugin and registered them in MainApplication. As I'm using TypeScript, I am cur ...

Navigating between pages in Ionic 4 presents the opportunity to seamlessly transfer data using either the navCtrl or Router service

In the previous version of Ionic, Ionic 3, developers were able to use the second argument of the navController to easily pass data to the next page and retrieve it using the navParams service. This feature was quite convenient. Are there similar methods ...

Challenges encountered when testing middleware in a TypeScript Node.js Express project

I have been exploring the repository at https://github.com/goldbergyoni/nodebestpractices to enhance my understanding of nodejs best practices. Below is a middleware I developed: import { NextFunction, Request, Response } from "express"; import ...

Relative path of Angular 2 component

After setting up my systemjs.config.js file to map the "app" to a "dist" folder, I encountered an issue when trying to reference my component html file relatively. The error message displayed was: Failed to load https://localhost:44337/dist/appComponent.h ...

Angular component linked to a dynamic object requiring user confirmation before changing or reverting to the original value

I've been working on getting a simple <select> behavior where the value reverts back if the user cancels the change. I managed to achieve it, but it took me quite a few hours and I'm not entirely satisfied with the implementation as it&apos ...

A guide to utilizing a signed URL and the Ionic camera plugin in Ionic 4 to upload images to Amazon S3

As I work with the Ionic Native plugin for image uploading using S3 signed URLs, I am encountering an issue due to the camera plugin generating images in base64 format. This is causing difficulties when trying to upload them in the correct format. takePho ...

Issue encountered when transferring Angular app to Python Flask

Not sure what information to provide, but I will give as much detail as possible. Currently, my Angular app is running on IIS and utilizing Classic ASP. Everything is working smoothly. There is a dropdown that fetches JSON data to populate a table. Recen ...