javascript - "object' 的身份必须更改”在 Angular 中是什么意思？

Question

我正在读这篇文章Angular doc ，它说:

With any object-like expression—such as object, Array, Map, or Set—the identity of the object must change for Angular to update the class list. Updating the property without changing object identity has no effect.

那么，如何更改对象的身份？

谢谢。

Answer 1

那里的措辞有点不幸。您无法真正更改对象的身份 - 身份就是该对象。这就像试图让 X 不是 X。这意味着需要为 Angular 创建一个新的对象或数组才能将其检测为不同。对于 vanilla JS 中的一个小例子:

const isSameObject = (obj1, obj2) => obj1 === obj2;

console.log(isSameObject({}, {})); // false, different objects

const someObj = {};
const sameReferenceToSomeObj = someObj;
sameReferenceToSomeObj.newProp = 'newVal';
console.log(isSameObject(someObj, sameReferenceToSomeObj)); // true, same object

为了让 Angular 检测到属性标识的更改，必须将属性值更改为新值，而不是更改旧值。上面代码片段中的第二个示例是如何在 Angular 中执行操作的示例；改变一个对象并不会改变它的身份(它仍然是同一个对象)，所以如果你在 Angular 中这样做，它会看到属性上的旧对象是 === 到新对象在属性上，并且不会因此产生视觉变化。

创建一个具有所需属性的全新对象，并将该对象放在组件上，然后 Angular 将能够看到新对象与旧对象不同===对象，并采取适当的行 Action 为结果，例如

this.theClassList = { ...this.theClassList, newProperty: 'foo' }

而不是

const newClassList = this.theClassList;
newClassList.newProperty = 'foo';
this.theClassList = newClassList;