Редактирование метода с массивом объектов

Question

У меня есть метод, который содержит массив объектов, и я хотел бы иметь возможность редактировать значения требуемыйМин и нужныйМакс.

    watchedRivers(): RiverInfo[] {
    return [
      {
        name: 'Sample River 1',
        address: 'Optional Address 1',
        currentFlow: 2.78,
        desiredMin: 1.5,
        desiredMax: 6
      },
      {
        name: 'Sample River 2',
        currentFlow: 857,
        desiredMin: 100,
        desiredMax: 500
      },
      {
        name: 'Sample River 3',
        address: 'Optional Address 1',
        currentFlow: 2800,
        desiredMin: 400,
        desiredMax: 3000
      }
    ];
  }

Метод, который я вызываю для этого, не перезаписывает объект .

updateFlows(index: number, updatedRiver: RiverInfo) {
    console.log(updatedRiver);
    this.watchedRivers()[index] = updatedRiver;
    console.log(this.watchedRivers()[index]);
    this.watchedRiversChanged.next(this.watchedRivers().slice());
  }

Объект updatedRiver выглядит как правильный формат в консоли. Почему не перезаписывается?

Answer 1

Каждый раз, когда вы вызываете метод watchedRivers(), он возвращает новый массив объектов RiverInfo, содержащий Sample River 1, Sample River 2 and Sample River 3. Поэтому назначение объекта updatedRiver на watchedRivers()[index] не приведет к изменению объекта RiverInfo внутри метода.

Если вы хотите сохранить информацию updatedRiver, вы можете сделать это любым из двух способов, как показано ниже:

1. Вместо того, чтобы возвращать массив из метода, вы можете сохранить его в переменной уровня класса.

class SomeClass {
  // Storing the values in a class level variable
  // so that it is accessible in all methods of this class
  private watchedRivers: RiverInfo[] = [
    {
      name: "Sample River 1",
      address: "Optional Address 1",
      currentFlow: 2.78,
      desiredMin: 1.5,
      desiredMax: 6
    },
    {
      name: "Sample River 2",
      currentFlow: 857,
      desiredMin: 100,
      desiredMax: 500
    },
    {
      name: "Sample River 3",
      address: "Optional Address 1",
      currentFlow: 2800,
      desiredMin: 400,
      desiredMax: 3000
    }
  ];

  updateFlows(index: number, updatedRiver: RiverInfo) {
    console.log(updatedRiver);
    this.watchedRivers[index] = updatedRiver;
    console.log(this.watchedRivers[index]);
    this.watchedRiversChanged.next(this.watchedRivers.slice());
  }
}

Теперь обновления сохраняются в переменной уровня класса.

Если вы не хотите изменять метод, вы можете сохранить массив в локальной переменной, а затем выполнить лог c.

updateFlows(index: number, updatedRiver: RiverInfo) {
    console.log(updatedRiver);
    let localData = this.watchedRivers();
    localData[index] = updatedRiver;
    console.log(localData[index]);
    this.watchedRiversChanged.next(localData.slice());
}

Answer 2

Вы делаете это неправильно

1) В функции watchedRivers вы просто возвращаете новый массив объектов. Поэтому каждый раз, когда вы вызываете эту функцию, она возвращает массив fre sh без каких-либо изменений

2) Устанавливает RiverInfo[] в свойстве компонента (переменной) отдельно

   data: RiverInfo[] = [
    {
      name: "Sample River 1",
      address: "Optional Address 1",
      currentFlow: 2.78,
      desiredMin: 1.5,
      desiredMax: 6
    },
    {
      name: "Sample River 2",
      currentFlow: 857,
      desiredMin: 100,
      desiredMax: 500
    },
    {
      name: "Sample River 3",
      address: "Optional Address 1",
      currentFlow: 2800,
      desiredMin: 400,
      desiredMax: 3000
    }
  ];

3) Чем из вашей функции верните эти данные из вашей функции

     watchedRivers(): RiverInfo[] {
            return this.data;
     }

4) Попробуйте это

https://stackblitz.com/edit/angular-wwwpon?embed=1&file=src / app / app.component.ts

Answer 3

Лучшее решение состоит в том, чтобы не мутировать this.watchedRivers ()

updateFlows(index: number, updatedRiver: RiverInfo) {
  const dataUpdated = [..this.watchedRivers()];
  dataupdated[index] = updatedRiver;
  this.watchedRiversChanged.next(dataUpdated);
}

Answer 4

Причиной возникновения вышеуказанной проблемы является то, что область действия массива RiverInfo ограничена функцией, а массив RiverInfo - сборщик мусора, как только выполнение функции завершается.