Question

我有一个角度组件，可以从后端获取一些数据，然后使用* ngFor将其迭代到另一个组件中。为了进行测试，我编写了randomize（）函数，该函数创建随机数据并返回它，而不是点击后端api（api尚未准备好）。但是我观察到的是，即使数据发生了更改，onChange也不会被触发。有人可以解释一下我刚接触角度时发生了什么情况。

mainComponent.ts

let mockData = {
  "someField": "some value",
  "someField": ["..."],
  "data": [
    {
      "someField": "POL",
      "data": [
        {
          "someField": 0,
          "someFieldThatIsChanged": [7.544, 2.345, 7, 8.452, 2, 6],
          "someField": [100.0, 0, 100.0, 0, 0],
          "someField": [15470, 345, 546, 2345],
          "someField": [15467, 345, 456, 654, 23456],
          "someField": [2312, 32542, 45623, 543, 45646],
          "someField": ["some value", "some value", "some value", "some value", "some value"]
        },
        {
          "someField": 0,
          "someFieldThatIsChanged": [7.544, 2.345, 7, 8.452, 2, 6],
          "someField": [100.0, 0, 100.0, 0, 0],
          "someField": [15470, 345, 546, 2345],
          "someField": [15467, 345, 456, 654, 23456],
          "someField": [2312, 32542, 45623, 543, 45646],
          "someField": ["some value", "some value", "some value", "some value", "some value"]
        },
        {
          "someField": 0,
          "someFieldThatIsChanged": [7.544, 2.345, 7, 8.452, 2, 6],
          "someField": [100.0, 0, 100.0, 0, 0],
          "someField": [15470, 345, 546, 2345],
          "someField": [15467, 345, 456, 654, 23456],
          "someField": [2312, 32542, 45623, 543, 45646],
          "someField": ["some value", "some value", "some value", "some value", "some value"]
        },]
    }]
}

public randomize(randomData) {
  randomData.forEach(element => {
    element.type = element.type + "type";
    element.data.forEach(dataElement => {

        const random = [
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100)];
        dataElement.someFieldThatIsChanged = random;
      }
    )
  });
  return randomData;
}

getGraphData(): void {
  let fetchedData;
  let body = this.createGraphApiRequest(this.mockData);
  this.modelData = body.data;
}

我有从一个ts导出的这个嘲笑数据，最初提供了嘲笑数据，当浏览器呈现页面时，我最初用于加载ui。同样，在ui事件中，我将使用相同的模拟数据，然后随机修改结构中的值以生成一些随机数据。

mainComponent.html

<div *ngFor='let model of modelData' class="chart-overflow">
  <app-subComponent [data]='model' [labels]='labelValues'></app-subComponent>
</div>

Answer 1

尝试使用map函数，因为它是创建新数组。因此，更改检测将检测到新引用并更新UI：

public randomize(randomData) {
  randomData.forEach(element => {
    element.type = element.type + "type";
    element.data.map(dataElement => ({

        const random = [
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100)];
        return dataElement.someFieldThatIsChanged = random;
      })
    )
  });
  return randomData;
}

Angular onChange不会在数据更改时触发

1 个答案: