angular的选择模型如何判断两个对象是否相等？

Question

我正在尝试 select 使用 Angular 的 selectionmodel 在 table 中预先 select 一些用户。检索 table 中用户的调用和检索已 select 用户的调用不同，因此实际对象不同。

我尝试在 UserProfile class 上编写一个 equals 方法，这似乎没有任何改变。重写代码以使用 id 可以解决问题，但我希望 selection 模型处理实际对象而不是 id。

这是我正在使用的代码，但我希望我的问题足够清楚。

@Input() selected: UserProfile[];

ngOnInit() {
    this.selection = new SelectionModel<UserProfile>(true, this.selected);

Answer 1

SelectionModel 作为 @angular/cdk 库的一部分实现。文档可以在 Angular Material 文档的 Collections page 中找到。

在代码中我们使用以下导入：

import { SelectionModel } from '@angular/cdk/collections';

SelectionModel 是使用本机 JavascriptSet() 对象构建的，可以在源 code:

中找到

private _selection = new Set<T>();

Set 对象允许您存储任何类型的唯一值，无论是原始值还是对象引用。

我们首先要考虑的是，在Javascript中，两个不同的对象实例总是不相等:

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
obj1 !== obj2; // => true

那么，就会出现以下情况：

const mySet1 = new Set();

const obj1 = {a: 1, b: 2};
mySet1.add(obj1);

const obj2 = {a: 1, b: 2};
mySet1.add(obj2)   // obj2 is referencing a different object, so the object will be added in the set

关于 JS 的更多信息 Set() here。

现在，我们真正需要的是集合中对象之间的深度值相等检查。不幸的是，没有方法可以覆盖 Set 对象中的比较方法，因此我使用非常流行的名为 [=] 的库编写了自己的 SelectionModel - SelectionModelImmutableJS 实现29=].

为了简化，通过使用immutable-js，我们将有以下情况：

const { Map, Set } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = Map({ a: 1, b: 2, c: 3 });
map1 !== map2; // => true, two different instances are not reference-equal
map1.equals(map2); // true, but are value-equal if they have the same values
const set = Set().add(map1);
set.has(map2); // true, because these are value-equal

选择模型的代码有点太大，我不会post它内联 - 它可以在工作演示中找到。

我们将在应用中使用：

import { SelectionModelImmutableJS } from './selection-model-immutable';

.....


public selection = new SelectionModelImmutableJS<IPeriodicElement>(
    true,
    this.initialSelection
  );

完整的工作演示： https://stackblitz.com/edit/angular-ivy-wnvohl

angular的选择模型如何判断两个对象是否相等？

How does angular's selection model determine equality of two objects?

selectionmodel

angular

angular-cdk