Как обновить данные в компоненте AngularJS плюс данные в компонентах, привязанных к свойству его модели представления?

Question

Я работаю над приложением AngularJS, которое содержит компонент, отображающий данные, извлекаемые из удаленного источника данных, очень распространенный сценарий.

Давайте назовем его компонентом «запись».

Модель представления для записи выглядит следующим образом:

record.viewModel = {
    firstName: "Bob",
    lastName: "Smith",
    data1: "foo",
    data2: "bar",
    dateRange: {
       start: "1/1/2019",
       end: "12/31/2019"
    }
}

У меня также есть компонент «Выбор диапазона дат».Он использует привязку AngularJS "<" для привязки к <code>record.viewModel.dataRange.

. При создании новой записи легко связать новый объект с компонентом выбора диапазона дат.Просто создайте новый объект {} и присвойте его record.viewModel.dateRange в методе $onInit.Легко!

Однако для обновления существующей записи все намного сложнее, поскольку обновляемая запись выбирается асинхронно.Я не могу просто присвоить извлеченный dateRange для record.viewModel.dateRange, потому что это изменит ссылку на объект переменной, оставляя привязку для dateRangeObject все еще привязанной к старой ссылке на объект.Решение, которое я использовал, состояло в том, чтобы связать функцию с компонентом выбора диапазона дат и передать ей новый dateRange.

Решение работает, но оно очень громоздко.Трудно вносить изменения в код, не нарушая ничего, и теперь мне пришлось создать новый компонент, в котором привязки имеют несколько уровней, и это вызывает головную боль, когда я просто думаю об этом.Я не хочу даже пытаться настроить пример кода, потому что он ужасен.

Мне нужен лучший способ сделать это.Я чувствую, что суть дела в том, что ссылка на объект связана с компонентом выбора диапазона дат.

Могу ли я сделать так, чтобы, если я получу свою модель представления из асинхронного источника данных, я мог назначитьприведите к переменной и обновите модель представления для компонента записи и компонента выбора диапазона дат в махе?

Answer 1

Я не могу просто присвоить извлеченную dateRange record.viewModel.dateRange, потому что это изменило бы ссылку на объект переменной

record.viewModel = {
    firstName: "Bob",
    lastName: "Smith",
    data1: "foo",
    data2: "bar",
    dateRange: {
       start: "1/1/2019",
       end: "12/31/2019"
    }
}

Чтобы обновить свойства объекта без изменения ссылки на объект, используйте Object.assign

Object.assign(record.viewModel.dateRange, response.data.dateRange);

Метод Object.assign() используется для копирования значений всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект.

---

Обновление

если в компонентах есть компоненты, я должен пройти через это и рекурсивно запустить Object.assign

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

angular.copy(record.viewModel, response.data.viewModel);

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