Angular ngFor not updating DOM when array is updated

Question

I'm working with Angular and am having an issue with data being displayed to the DOM via ngFor.

By default, the dataArray variable in my code is empty, but an HTTP post request to a given endpoint updates the array, populating the array with a collection of objects.

I'm able to console.log() the array and see the newly updated values. However, ngFor still does not seem to be iterating through the updated array and modifying the DOM accordingly.

I'm also able to define the array with items in my code, and ngFor will correctly iterate and display the values.

It was to my understanding that the DOM should be updated according to the state that is presented within the component, but I am probably missing something.

Here's my code.

TypeScript

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-data-item",
  templateUrl: "./data-item.component.html",
  styleUrls: ["./data-item.component.css"]
})
export class DataItemComponent implements OnInit {
  public dataArray: Array<object> = [];

  //Using ngFor to iterate through this array would work w/ no problem.
  anotherArray: Array<String> = ["Hello", "there"];

  constructor(private http: HttpClient) {}

  ngOnInit() {}
  //A call is made to sendRequest from an outside component, which is able to successfully trigger this function
  sendRequest(requestBody: object) {
    this.http
      .post("http://localhost:4343/getProgramDetails", requestBody, {
        headers: { "Content-Type": "application/json" }
      })
      .subscribe(response => {
        const dataItems = response[0]["key"];

        dataItems.forEach(item => {
          //Push an itemInstance to the dataArray variable
          const itemInstance = {
            description: item["description"],
            type: incentive["type"],
            value: incentive["value"]
          };
          this.dataArray.push(itemInstance);
        });
        //Am able to see array values here
        console.log(this.dataArray);
      });
  }
}

Angular Template

<table>
    <tr>
        <td>Vehicle</td>
        <td>Incentive Type</td>
        <td>Amount</td>
    </tr>
    <ul>
        <!-- Items won't print here when array is updated -->
        <li *ngFor="let item of dataArray">
            {{ item }}
        </li>
    </ul>
</table>

Thanks!

hmm, can you create a plnkr that recreates the issue. Here is a simpler plnkr demonstrating this concept working (plnkr.co/edit/VSARynj1Y05hPBcecrGB?p=preview). is the template you posted from DataItemComponent? Or is it a child component — LLai
– LLai, Commented Nov 8, 2017 at 21:33
try this this.dataArray = [...this.dataArray , itemInstance]; instead of .push — Nadhir Falta
– Nadhir Falta, Commented Nov 24, 2019 at 22:37

C.OG · Accepted Answer · 2019-12-25 20:11:25Z

2

this.dataArray = this.http
  .post("http://localhost:4343/getProgramDetails", requestBody, {
    headers: { "Content-Type": "application/json" }
  })
  .map(response => {
    let result = [];
    const dataItems = response[0]["key"];
    dataItems.forEach(item => {
      //Push an itemInstance to the dataArray variable
      const itemInstance = {
        description: item["description"],
        type: incentive["type"],
        value: incentive["value"]
      };
      result.push(itemInstance);
    });
    return result;
  });

and in your view

<li *ngFor="let item of (dataArray | async)">
  {{ item }}
</li>

edited Dec 25, 2019 at 20:11

C.OG

6,5373 gold badges24 silver badges41 bronze badges

answered Nov 8, 2017 at 21:13

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ngFor not updating DOM when array is updated

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related