Синхронизация массива объектов и дочерних объектов в Angular

Question

Я довольно плохо знаком с Angular, Ionic и т. Д., Но у меня есть вопрос по поводу синхронизации массива объектов.

Скажите, что у меня есть провайдер под названием Устройства, подобные этому:

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

@Injectable()
export class Devices {

  public devices: any;  

...

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

import { Devices } from '../../providers/devices/devices';

@IonicPage()
@Component({
  selector: 'page-device-list',
  templateUrl: 'device-list.html',
})
export class DeviceListPage {

  device: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, 
      public devices: Device) {

this.device = this.devices.devices[0];
this.device.name = "A new name";
...

Проблема в том, что this.device является локальной ссылкой на объект. Я хочу иметь возможность синхронизировать эти локальные объекты с глобальным объектом в службе (Devices.devices), чтобы при обновлении локальной ссылки я мог также обновлять значение в поставщике устройств, чтобы другие компоненты, использующие этого поставщика, могли быть обновленным.

Есть ли "угловой" способ сделать это или мне нужно написать какую-то функцию setDevice внутри провайдера, которая перестраивает массив devices с новым значением для device?

Answer 1

Объекты в Javascript доступны по ссылке. Так что если вы обращаетесь к объекту в вашем сервисе напрямую или назначаете сам объект локальной переменной, а не присваиваете его свойство локальной переменной, он будет синхронизирован. Другой вариант - использовать Object.assign() каждый раз, когда вы вносите изменения.

Обновление: Вот небольшой пример, чтобы быстро увидеть, как работают объекты в JS

var a  = {
 name: "John",
 age: 30
}
var b = a;

b.name = "Smith";

console.log(a.name);

let c = a;

let d = c.name;
d = "Mikey";

console.log(c.name, a.name, b.name);

Здесь a, b и c все указывают на один и тот же объект, поэтому, если вы в любом случае измените имя, все три ссылки будут затронуты. d однако не указывает на объект. Это только сохранение свойства name и его изменение не изменит исходный объект. JSFiddle: http://jsfiddle.net/owr6fmub/1/

Таким образом, вы можете снова сохранить объект локально - он создаст другую ссылку и будет синхронизирован. Однако сохранение свойства объекта локально не изменит основной объект. Они не будут синхронизированы.

То же самое относится и к массивам. Массивы - это объекты в Javascript.

Answer 2

this.devices.devices[0].name = "A new name"

Я думаю, что все будет в порядке.

Вы также можете использовать

BehaviorSubject

Чтобы заметить другой компонент, что устройства были изменены.