Javascript 数据更改时未触发角度更改

我有一个angular组件，它从后端获取一些数据，并使用*ngFor将其迭代到另一个组件中。出于测试目的，我编写了一个randomize（）函数，它创建随机数据并返回它，而不是访问后端api（api尚未就绪）。但我观察到的是，即使数据发生了变化，onChange也没有被触发。有人能解释一下发生了什么，因为我是新来的

main component.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;
}

我有这个mockData，它是从一个ts导出的，最初提供mockData，当浏览器呈现页面时，我使用它来加载ui。在ui事件中，我再次获取相同的模拟数据，然后随机修改结构中的值以生成一些随机数据

mainComponent.html

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

---

尝试使用

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

---

希望这有帮助！您不应使用

forEach

，而应使用

map

确保将新数组引用保存到

modelData

。或者您可以执行

element.data=[…element.data]

，只是为了测试这是否是问题所在。您可能需要对嵌套对象执行与well@PierreDuc我想你是对的，因为当我尝试点击我创建的一个临时模拟端点时，它对我很有效，而这个端点刚刚返回了一个json。因此，创建新引用也应该从代码开始。如果您可以提供它作为答案，我将接受它。显然，在阅读了一些文档后，我了解到只有在更改数组引用或从数组中添加或删除值时，才会发生更改检测。所以，你的建议应该行得通。但我认为，由于我有嵌套数组，我必须像@PierreDuc建议的那样更新这些引用。