Angular not reflecting changes in array or boolean state

Question

Angular not reflecting changes in array or boolean state

I am using a simple ngFor loop to display a list:

<a class="list-group-item " *ngFor="let user of chatsLists" (click)="viewChat(user)">
    <div class="media chat-list-text py-1" [ngClass]="{'align-items-center': !user.isActiveChat}">
        <span class="avatar avatar-md mr-2">
            <img [src]="user.userid.userImage" alt="Avatar">
        </span>
        <div class="media-body">
            <h6 class="list-group-item-heading mb-1">{{user.userid.userName}}
            </h6>

        </div>
    </div>
</a>

The data is being retrieved from an API function:

  chatsLists: any; //also tried with chatsLists = [];


  getChats() {
    this.api.getAllChats().subscribe((res: any) => {
      if (res.success) {
        this.chatsLists = res.data;
        this.chatdetails = this.chatsLists[0].messages;
        this.showChats = true;
      }
    })
  }

The ngFor loop is not updating when I change the boolean value in the function and it's not reflecting in the HTML file. I have also tried placing a simple conditional statement in the HTML:

<p *ngIf="showChats">Show </p>

Below is the full code of the component.ts file for reference:

this.showChats = true;

// Component code goes here

angular typescript

Answer 1

Answer №1

Utilizing ChangeDetectionStrategy.OnPush

involves ensuring that when making asynchronous calls outside of a component, you must explicitly instruct the component to update. Is this the approach you wish to take? If so, make sure to include changeDetectorRef in your constructor and use it to indicate when the component is ready for change detection:

constructor(..., private changeDetectorRef: ChangeDetectorRef) {

Furthermore, within your getChats function:

getChats() {
  this.api.getAllChats().subscribe((res: any) => {
    if (res.success) {
      this.chatsLists = res.data;
      this.chatdetails = this.chatsLists[0].messages;
      this.showChats = true;
      this.changeDetectorRef.markForCheck(); //Include this line here
    }
  })
}

Answer 2

Utilizing ChangeDetectionStrategy.OnPush

involves ensuring that when making asynchronous calls outside of a component, you must explicitly instruct the component to update. Is this the approach you wish to take? If so, make sure to include changeDetectorRef in your constructor and use it to indicate when the component is ready for change detection:

constructor(..., private changeDetectorRef: ChangeDetectorRef) {

Furthermore, within your getChats function:

getChats() {
  this.api.getAllChats().subscribe((res: any) => {
    if (res.success) {
      this.chatsLists = res.data;
      this.chatdetails = this.chatsLists[0].messages;
      this.showChats = true;
      this.changeDetectorRef.markForCheck(); //Include this line here
    }
  })
}

Answer 3

Answer №2

One possible reason for this issue could be the implementation of the OnPush strategy. It is likely that the change detection has already occurred due to the asynchronous nature of the HTTP request and callback handling.

A recommendation would be to modify your subscription approach by utilizing the async pipe.

Here's an example:


  setChats() {
    this.chats$ = this.api.getAllChats().pipe(
      filter((res: any) => res.success),
      tap((res) => {
        this.chatsLists = res.data;
        this.chatdetails = this.chatsLists[0].messages;
        this.showChats = true;
      })
    );

Consider implementing something similar to the above code snippet and using {{ chats$ | async }} in your HTML template.

The provided code snippet could benefit greatly from variable typing and improved stream composition. When working with OnPush, it is highly recommended to stick with the async pipe for optimal performance.

Answer 4

One possible reason for this issue could be the implementation of the OnPush strategy. It is likely that the change detection has already occurred due to the asynchronous nature of the HTTP request and callback handling.

A recommendation would be to modify your subscription approach by utilizing the async pipe.

Here's an example:


  setChats() {
    this.chats$ = this.api.getAllChats().pipe(
      filter((res: any) => res.success),
      tap((res) => {
        this.chatsLists = res.data;
        this.chatdetails = this.chatsLists[0].messages;
        this.showChats = true;
      })
    );

Consider implementing something similar to the above code snippet and using {{ chats$ | async }} in your HTML template.

The provided code snippet could benefit greatly from variable typing and improved stream composition. When working with OnPush, it is highly recommended to stick with the async pipe for optimal performance.

Angular not reflecting changes in array or boolean state

Answer №1

Answer №2

Similar questions

The property 'setParentKeyForNodeData' is not found in the 'Model' type. Perhaps you meant to use 'setCategoryForNodeData'?

Awaiting the outcome of the Typescript map function is non-existent

Using EventEmitter for Component Communication in Angular 2

Get a PNG file in the form of binary/octet-stream for download

What could be causing the recurring error when attempting to push data into an array in Angular 10?

Get rid of Firebase hosting

Is it necessary to create a wrapper for Angular Material2 components?

Instructions for activating the "Navigate to Declaration" feature in TypeScript for JSON files using i18next

Categorize array elements based on nested object property and combine them

The page does not appear to be updating after the onClick event when using the useState hook

Is there a method in RXJS that allows an operator to pause and wait for a subscription to finish before proceeding with the workflow?

Show a select element with choices that change depending on another select element

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

The error message related to TupleUnion in TypeScript is indicating that the depth of type instantiation may be too deep and could

Merge the inverse property and inverse class selector with the current selector for enhanced specificity

Typescript React Union type

After changing routes in Angular 4, the application experiences decreased speed and a continual increase in the number of nodes, particularly noticeable in Chrome but not in Firefox

best practices for creating space between flexbox items

Calculate the total value of an object using Typescript

Tips for combining values with Reactive Forms