Angular ngFor更新数组时不更新DOM [英] Angular ngFor not updating DOM when array is updated

问题描述

我正在使用Angular，并且遇到通过ngFor将数据显示到DOM的问题.

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

默认情况下，我的代码中的dataArray变量为空，但是对给定端点的HTTP发布请求会更新该数组，并使用对象集合填充该数组.

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.

我能够console.log()该数组并查看新更新的值.但是，ngFor似乎仍然没有遍历更新后的数组并相应地修改DOM.

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.

我还可以在代码中定义包含项的数组，并且ngFor将正确地迭代并显示值.

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

据我了解，应该根据组件中显示的状态更新DOM，但我可能会丢失一些东西.

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.

这是我的代码.

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);
      });
  }
}

角度模板

<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>

谢谢！

推荐答案

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;
  });

在您看来

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

这篇关于Angular ngFor更新数组时不更新DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！