Angular onChange не срабатывает при передаче данных

Question

У меня есть компонент angular, который извлекает некоторые данные из серверной части и перебирает их в другой компонент, используя * ngFor. Для целей тестирования я написал функцию randomize (), которая создает случайные данные и возвращает их вместо того, чтобы использовать API-интерфейс сервера (API еще не готов). Но я заметил, что, несмотря на изменения данных, onChange не запускался. Может кто-нибудь объяснить, что происходит, как я новичок в angular.

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

У меня есть эти mockData, который экспортируется из одного тс изначально предоставить mockData, который я использую для загрузки пользовательского интерфейса, когда браузер отображает страницу. Опять же при событии пользовательского интерфейса я беру те же самые фиктивные данные, а затем изменяю значения внутри структуры случайным образом, чтобы получить некоторые случайные данные.

mainComponent. html

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

Answer 1

Попробуйте использовать map functuon при создании нового массива. Таким образом, обнаружение изменений обнаружит новую ссылку и обновит пользовательский интерфейс:

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