CODEWITHSUNDEEP
angular
Alex
Alex

Reputation: 802

Angular ngFor not updating DOM when array is updated

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!

Upvotes: 8

Views: 10580

Answers (1)

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

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>

Upvotes: 2

Related Questions