AngularJS сталкивается с проблемами, чтобы понять объект клонирования и назначение ссылки

avatar
Saiful Azad
8 апреля 2018 в 07:43
90
2
2

Я столкнулся с проблемой в AngularJS 1.6 Есть некоторые недоразумения. Я перебираю массив объектов с именем aList, который содержит изменяемые объекты в части HTML.

<div ng-repeat="item in aList>
   <a ng-click = "updateDataFun(item)">Click</a>
</div>

Теперь в контроллере у меня есть это

constructor(){
    this.updateData = {};
}
updateDataFun(item){
   // this.updateData = Object.assign({}, item); // this solve the issue. 
   this.updateData = item; 
}
cancelUpdate(){
   this.updateData = {}
}

Теперь в модальном режиме у меня что-то подобное <input ng-model="updateData.name">

Если я изменю что-нибудь (имя, атрибут updateData) через модальное окно и нажму cancelUpdate(), изменения отразятся в массиве aList.

Вот несколько вопросов:

  1. В методе <86663334347806> присвоение является эталонным присвоением (предположим). Я прав? Так что, если я перейду на this.updateData через модальное окно, это отразится на item. Кроме того, измените значение индекса aList, с которым связано item.
  2. Если да, то при вызове cancelUpdate() this.updateData будет {}. Почему это не отражает item? <86663334347835>Должно быть {}.

Однако, если я раскомментирую this.updateData = Object.assign({}, item); и прокомментирую this.updateData = item;, тогда все заработает.

Источник
Saiful Azad
8 апреля 2018 в 08:00
0

@Клэйес, Tnx. Я изменил его.

Ответы (2)

avatar
Mike Drakoulelis
8 апреля 2018 в 08:10
1

Как было предложено yaron, ваше предположение о том, что this.updateData имеет ссылку на человека item из aList, верно. Таким образом, когда вы изменяете свойство this.updateData в любом месте (даже в модальном окне, если оно также получает ссылку), оно отражается в списке.

Однако в cancelUpdate() вы назначаете пустой объект вместо этой ссылки (вы заменяете ссылку item ссылкой на что-то другое). Ссылка на item не работает, поэтому любые изменения с этого времени (включая присвоение пустого объекта) не отражены. Если вы хотите присвоить {} item, вам необходимо обновить список напрямую или изменить объект item напрямую (не переназначать).

this.updateData = Object.assign({}, item) клонирует элемент в совершенно новый объект и сохраняет его ссылку на this.updateData, поэтому любые изменения снова не будут отражаться на item.

avatar
yaron
8 апреля 2018 в 07:57
2

javascript передает объект по ссылке, а не по значению так что эта строка - ваша проблема: 

this.updateData = item;

эта строка передает элемент по ссылке, поэтому все изменения, которые вы будете вносить в эту переменную, повлияют на элемент исходного списка. предлагаемое решение - скопировать объект, а не передавать его по ссылке вот так:

this.updateData = JSON.parse(JSON.stringify(item)); // create new item in the memory and assign it to updateData variable

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

Изменить извините, пропустил ваши вопросы,

  1. вы правы, как объяснялось ранее,

  2. когда вы пишете

    переменная = {} смысл в том, что вы не меняете ссылку переменной на пустой объект, вы присваиваете новый (и пустой) объект переменной (а не ссылке на объект)

надеется на помощь