为什么 Angular Mat Table 2 选择模型会失败？
Why does Angular Mat Table 2 selection model fail?
这是一个足够简单的问题（TLDR；）：
为什么 Angular Mat Table 2 selection 模型会失败？
特别是为什么它会因为 object 的副本传递给它的 select() 或 toggle() 方法而失败。
但是我包括了很多我的调试过程，因此长度：
不要被它吓到，虽然任何人都可以在一分半钟内阅读。
上下文：
- 一个 table 制作于 mat table 2
- 开始使用 material 2 的 selection 模型
selection 到 select table 点击后的项目
- 添加了 ctrl-click（当您 Ctrl- 单击时添加删除到 selection）
- 也尝试添加 shift-click 支持（Shift- 单击会 add/remove 单击和最后一个 added/removed 项目之间的所有项目)
什么失败了：
通过 Shift- 单击方法添加到 selection 的项目在 selection 数组中，但未显示为 select 在视觉上编辑，独立于以下 clicks/selections（这将产生相同的结果例如：在保持 selection 中当前的视觉故障的同时保持无故障的 selection 阵列。是的如果整个数组在 console.log 中是正确的，那么之后单击“bug-free”类型至少会修复错误的，但不会。
代码：
处理 Shift-select :
html :
...
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="pinnedColumnsWSelect"></mat-header-row>
<mat-row *matRowDef="let row; columns: pinnedColumnsWSelect;"
class="noselect"
[ngClass]="{ 'selected': selection.isSelected(row)}"
(click)="addToSelection(row, $event, false)"></mat-row>
</mat-table>
...
（false 表示，点击是来自行首的复选框元素还是仅点击行的其余部分？）
ts :
addToSelection(row, event, checkbox){
if(event.shiftKey && this.previous !== -1 && this.previous !== row.numberOfRow) {
if(this.previous > row.numberOfRow){
for(let previous = this.previous - 1; previous >= row.numberOfRow; previous-- ){
this.selection.toggle(this.originalDataSet.filter(x => x['numberOfRow'] === previous)[0] as object[]);
}
}else{
for(let previous = this.previous + 1; previous <= row.numberOfRow; previous++ ){
this.selection.toggle(this.originalDataSet.filter(x => x['numberOfRow'] === previous)[0] as object[]);
}
}
} else if(event.ctrlKey || checkbox) {
this.selection.toggle(row);
} else {
if(this.originalDataSet){
if(this.selection.selected.length === 1 && this.selection.selected[0] === row) {
this.selection.clear();
} else {
this.selection.clear();
this.selection.select(row);
}
}
}
this.previous = row.numberOfRow;
}
正如您可能从上面推断的那样，我首先检查 Shift 键是否被按下。
如果是，我会应用我的 selection，如果 Shift 没有被按住，但 Ctrl 是 ，我添加到 selection（这个有效），最后我在没有按下任何键的情况下，我只是清除 selection并将新项目设置为唯一 selected 项目。
你也可能从阅读我上面的代码中得出结论，我在“shift held down”部分试图做的是为每一行获取相应的行 selected 并传递它selection 的切换功能。
调试中：
之前 console.logged 行并注意到该行确实是 table 的整个当前行我推断我可以模拟传递给方法的正确 objects在 A 点和 B 点之间“切换”。
我的 material table 接受一个 object 数组作为它的数据集。每个object对应一行，每个object的键对应table的headers。到目前为止一切顺利。
自己从数组中拉出正确的行（使用过滤器匹配 numberOfRow，我的唯一标识符恰好计算行数（0、1、2、3 等...） ) 应该给我同样的东西。
控制台记录两者给我 同样的东西 :
const y = this.originalDataSet.filter(x => x['numberOfRow'] === previous)[0];
console.log('filtered item ', y, ' row ', row, ' equal ', y === row, y == row );
然而，噩梦始于两人宣布彼此不平等。
现在 === 很公平，但是 ==，为什么？？
这是怎么发生的，我不知道:
filtered item {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …} row {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …} equal false false
这是我以前在 javascript 中从未见过的合法内容。这两个 object 是相同的 我现在通过打开所有节点手动检查了 15 次。然而 == 失败了。
但是请记住这个想法，虽然它很迷人，但我有更迷人的东西给你。
一个Deeper-seeded问题：
让我们 console.log 我们的 selection (console.log(this.selection.selected);)
- 然后点击我们的第一个项目mat-table
- shift-click第四个
- ctrl 点击第五个
您希望发生什么？
由于 selection 的格式不正确，none 最终被 select 编辑了？我会喜欢那个
只有第一个结束 selected 因为 selection 的数组在那个点之外不正确？这也有道理
所有 5 项都已正确 selected？可以做梦
好吧，没有：
好的，让我们看看日志：
(5) [{…}, {…}, {…}, {…}, {…}]
0 : {numberOfRow: 0, nCommande: "2284595", nLigne: "1", nEcheance: "0", id: {…}, …}
1 : {numberOfRow: 1, nCommande: "2284595", nLigne: "2", nEcheance: "0", id: {…}, …}
2 : {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …}
3 : {numberOfRow: 3, nCommande: "4500131111", nLigne: "00020", nEcheance: "0001", id: {…}, …}
4 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
length : 5
__proto__:Array(0)
我很困惑。
您使用此数组正确 selected 数组项 0 和 4，但对于介于两者之间的所有内容，no-go，即使 4 的 selection（第 5 项）排在最后。
怎么样？
这种在人眼无法分辨的“错误”和“正确”之间“区分”的模式，会随着您不断地切换 select 离子和 ctrl select 离子而继续。如果您的 this.selection.selected 是 100000 个项目，它仍然不会在实际的视觉表示中 selected 所有这些项目添加到它的数组中并正确地 selected 所有那些用 ctrl 添加的项目.
Shift-Click起来了吗？ :
让我们把它混合起来，因为这就是我们如何得到一些最终偏离常规的东西。
让我们尝试使用 shift
删除select
如果我做一个月e shit click 打算再添加三个项目和一个控制点击下面的项目，然后 shift click back UP 到第二个项目：
与我们目前的混乱局面没有什么不同，至少在视觉上是这样：
(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0 : {numberOfRow: 0, nCommande: "2284595", nLigne: "1", nEcheance: "0", id: {…}, …}
1 : {numberOfRow: 1, nCommande: "2284595", nLigne: "2", nEcheance: "0", id: {…}, …}
2 : {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …}
3 : {numberOfRow: 3, nCommande: "4500131111", nLigne: "00020", nEcheance: "0001", id: {…}, …}
4 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
5 : {numberOfRow: 5, nCommande: "4500634818", nLigne: "00020", nEcheance: "0001", id: {…}, …}
6 : {numberOfRow: 6, nCommande: "4500634818", nLigne: "00030", nEcheance: "0001", id: {…}, …}
7 : {numberOfRow: 7, nCommande: "4500634818", nLigne: "00040", nEcheance: "0001", id: {…}, …}
8 : {numberOfRow: 8, nCommande: "4500634818", nLigne: "00050", nEcheance: "0001", id: {…}, …}
length : 9
(4) [{…}, {…}, {…}, {…}]
0 : {numberOfRow: 0, nCommande: "2284595", nLigne: "1", nEcheance: "0", id: {…}, …}
1 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
2 : {numberOfRow: 8, nCommande: "4500634818", nLigne: "00050", nEcheance: "0001", id: {…}, …}
3 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
length : 4
好吧，这出乎意料。
为什么它保留第 4 项而不是像其他的那样删除select并在此基础上再次添加它？
这让我觉得还有另一个我不知道的用于比较的数组。
那onChange呢？ :
此外
onChange 结果完全符合预期：
ngOnInit() {
this.selection.onChange.subscribe(x=> {
console.log(x);
});
}
shift-click 从第一项到第六项再返回：
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
我检查了它们指示的内容是否完全符合它们应有的内容（正确的项目编号以正确的顺序）。
但视觉效果不尽如人意。
抄送真的会失败吗？ :
另一个实验：
我在介绍中提到 object 的副本将被拒绝：
这是真的。
如果我对我们目前的功能 ctrl 代码执行此操作，它就会停止运行（顺便说一句，这是导入的 underscorejs 库，它是一个浅层克隆，但它不会省略底层，它使用它们的内存引用）:
} else if(event.ctrlKey || checkbox) {
const bb = _.clone(row);
this.selection.toggle(bb);
}
这种方法也会发生同样的事情（这是一个深度克隆）：
} else if(event.ctrlKey || checkbox) {
const bb = jQuery.extend(true, {}, row);
this.selection.toggle(bb);
}
这些行不再在视觉上 select 使用 ctrl-click 编辑，但控制台记录了 selection 阵列，selection 的所有其他方面仍然完美无缺。
Angular、Material、OS、TypeScript、浏览器的哪些版本？ :
windows 专业版 10 64 位
chrome
{
"name": "web.ui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --aot",
"build": "ng b --prod",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/cdk": "^6.1.0",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.1.0",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@types/underscore": "^1.8.7",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.3",
"file-saver": "^1.3.8",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"ng2-ion-range-slider": "^2.0.0",
"ngx-bootstrap": "^3.0.0",
"ngx-dropzone-wrapper": "^6.1.0",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.0.0-rc.0",
"typescript": "2.7.2",
"underscore": "^1.8.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.5",
"@angular/cli": "^6.0.5",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "^2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.1.3",
"codelyzer": "^4.2.1",
"postcss-modules": "^1.1.0",
"protractor": "~5.3.0",
"ts-node": "~6.0.5",
"tslint": "~5.10.0"
}
}
好的，我想通了，这对你们中的一些人来说似乎是我给出的问题中的一个未知数，所以你们不可能猜到，因为我没有给你们我的全部组件和其他人看起来很明显，因为您对 mat table 非常了解，并且您可以从我的变量命名中看出有什么不对劲，
我有一组四个局部变量，用于处理我的对象的四个步骤，从它从 API 到达到它在 mat-table 中可视化显示。
// [ 1 ] this first gets the api object and will serve as a store
originalDataSet:Array<object>;
// [ 2 ] rendered after filters
filteredDataSet:Array<object>;
// [ 3 ] sclice step (needs to be second to last due to dual slider for size)
dataSlice = [];
// [ 4 ] final. what actually is queried by Mat Table
@ViewChild(MatSort) sort: MatSort;
dataSource: MatTableDataSource<any>;
行（对象）在 1 和 4 之间确实相同，但自那以后很多行（对象）都丢失了。
这并没有回答为什么 javascript 认为一个对象的两个副本不一样，但它确实回答了为什么我提供给 toggle() 方法的对象被认为与row
现在 this.dataSource.filteredData 我实际上是在迭代与垫子 table 相同的数组。
这不会导致页面切换和 shift-clicking 等缺陷。
（除了不从第一页选择项目外，它不能再迭代，因为它们不在当前列表中，这是我一开始想避免的，但我会解决这个问题一)
如果有人知道为什么 js 无法将对象的副本视为与自身相等，我很想知道答案。
如果有人能看到这个对象如何不符合 mat table 的选择模型的标准以及我是如何愚弄它的，我也很想知道。
我愿意将您标记为答案并给予 50 点赏金。
这是一个足够简单的问题（TLDR；）：
为什么 Angular Mat Table 2 selection 模型会失败？
特别是为什么它会因为 object 的副本传递给它的 select() 或 toggle() 方法而失败。
但是我包括了很多我的调试过程，因此长度：
不要被它吓到，虽然任何人都可以在一分半钟内阅读。
上下文：
- 一个 table 制作于 mat table 2
- 开始使用 material 2 的 selection 模型
selection到 select table 点击后的项目 - 添加了 ctrl-click（当您 Ctrl- 单击时添加删除到 selection）
- 也尝试添加 shift-click 支持（Shift- 单击会 add/remove 单击和最后一个 added/removed 项目之间的所有项目)
什么失败了：
通过 Shift- 单击方法添加到 selection 的项目在 selection 数组中，但未显示为 select 在视觉上编辑，独立于以下 clicks/selections（这将产生相同的结果例如：在保持 selection 中当前的视觉故障的同时保持无故障的 selection 阵列。是的如果整个数组在 console.log 中是正确的，那么之后单击“bug-free”类型至少会修复错误的，但不会。
代码：
处理 Shift-select :
html :
...
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="pinnedColumnsWSelect"></mat-header-row>
<mat-row *matRowDef="let row; columns: pinnedColumnsWSelect;"
class="noselect"
[ngClass]="{ 'selected': selection.isSelected(row)}"
(click)="addToSelection(row, $event, false)"></mat-row>
</mat-table>
...
（false 表示，点击是来自行首的复选框元素还是仅点击行的其余部分？）
ts :
addToSelection(row, event, checkbox){
if(event.shiftKey && this.previous !== -1 && this.previous !== row.numberOfRow) {
if(this.previous > row.numberOfRow){
for(let previous = this.previous - 1; previous >= row.numberOfRow; previous-- ){
this.selection.toggle(this.originalDataSet.filter(x => x['numberOfRow'] === previous)[0] as object[]);
}
}else{
for(let previous = this.previous + 1; previous <= row.numberOfRow; previous++ ){
this.selection.toggle(this.originalDataSet.filter(x => x['numberOfRow'] === previous)[0] as object[]);
}
}
} else if(event.ctrlKey || checkbox) {
this.selection.toggle(row);
} else {
if(this.originalDataSet){
if(this.selection.selected.length === 1 && this.selection.selected[0] === row) {
this.selection.clear();
} else {
this.selection.clear();
this.selection.select(row);
}
}
}
this.previous = row.numberOfRow;
}
正如您可能从上面推断的那样，我首先检查 Shift 键是否被按下。 如果是，我会应用我的 selection，如果 Shift 没有被按住，但 Ctrl 是 ，我添加到 selection（这个有效），最后我在没有按下任何键的情况下，我只是清除 selection并将新项目设置为唯一 selected 项目。
你也可能从阅读我上面的代码中得出结论，我在“shift held down”部分试图做的是为每一行获取相应的行 selected 并传递它selection 的切换功能。
调试中：
之前 console.logged 行并注意到该行确实是 table 的整个当前行我推断我可以模拟传递给方法的正确 objects在 A 点和 B 点之间“切换”。
我的 material table 接受一个 object 数组作为它的数据集。每个object对应一行，每个object的键对应table的headers。到目前为止一切顺利。
自己从数组中拉出正确的行（使用过滤器匹配 numberOfRow，我的唯一标识符恰好计算行数（0、1、2、3 等...） ) 应该给我同样的东西。
控制台记录两者给我 同样的东西 :
const y = this.originalDataSet.filter(x => x['numberOfRow'] === previous)[0];
console.log('filtered item ', y, ' row ', row, ' equal ', y === row, y == row );
然而，噩梦始于两人宣布彼此不平等。
现在 === 很公平，但是 ==，为什么？？
这是怎么发生的，我不知道:
filtered item {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …} row {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …} equal false false
这是我以前在 javascript 中从未见过的合法内容。这两个 object 是相同的 我现在通过打开所有节点手动检查了 15 次。然而 == 失败了。
但是请记住这个想法，虽然它很迷人，但我有更迷人的东西给你。
一个Deeper-seeded问题：
让我们 console.log 我们的 selection (console.log(this.selection.selected);)
- 然后点击我们的第一个项目mat-table
- shift-click第四个
- ctrl 点击第五个
您希望发生什么？
由于 selection 的格式不正确，none 最终被 select 编辑了？我会喜欢那个 只有第一个结束 selected 因为 selection 的数组在那个点之外不正确？这也有道理 所有 5 项都已正确 selected？可以做梦
好吧，没有：
好的，让我们看看日志：
(5) [{…}, {…}, {…}, {…}, {…}]
0 : {numberOfRow: 0, nCommande: "2284595", nLigne: "1", nEcheance: "0", id: {…}, …}
1 : {numberOfRow: 1, nCommande: "2284595", nLigne: "2", nEcheance: "0", id: {…}, …}
2 : {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …}
3 : {numberOfRow: 3, nCommande: "4500131111", nLigne: "00020", nEcheance: "0001", id: {…}, …}
4 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
length : 5
__proto__:Array(0)
我很困惑。
您使用此数组正确 selected 数组项 0 和 4，但对于介于两者之间的所有内容，no-go，即使 4 的 selection（第 5 项）排在最后。
怎么样？
这种在人眼无法分辨的“错误”和“正确”之间“区分”的模式，会随着您不断地切换 select 离子和 ctrl select 离子而继续。如果您的 this.selection.selected 是 100000 个项目，它仍然不会在实际的视觉表示中 selected 所有这些项目添加到它的数组中并正确地 selected 所有那些用 ctrl 添加的项目.
Shift-Click起来了吗？ :
让我们把它混合起来，因为这就是我们如何得到一些最终偏离常规的东西。
让我们尝试使用 shift
删除select如果我做一个月e shit click 打算再添加三个项目和一个控制点击下面的项目，然后 shift click back UP 到第二个项目：
与我们目前的混乱局面没有什么不同，至少在视觉上是这样：
(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0 : {numberOfRow: 0, nCommande: "2284595", nLigne: "1", nEcheance: "0", id: {…}, …}
1 : {numberOfRow: 1, nCommande: "2284595", nLigne: "2", nEcheance: "0", id: {…}, …}
2 : {numberOfRow: 2, nCommande: "4500131111", nLigne: "00010", nEcheance: "0001", id: {…}, …}
3 : {numberOfRow: 3, nCommande: "4500131111", nLigne: "00020", nEcheance: "0001", id: {…}, …}
4 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
5 : {numberOfRow: 5, nCommande: "4500634818", nLigne: "00020", nEcheance: "0001", id: {…}, …}
6 : {numberOfRow: 6, nCommande: "4500634818", nLigne: "00030", nEcheance: "0001", id: {…}, …}
7 : {numberOfRow: 7, nCommande: "4500634818", nLigne: "00040", nEcheance: "0001", id: {…}, …}
8 : {numberOfRow: 8, nCommande: "4500634818", nLigne: "00050", nEcheance: "0001", id: {…}, …}
length : 9
(4) [{…}, {…}, {…}, {…}]
0 : {numberOfRow: 0, nCommande: "2284595", nLigne: "1", nEcheance: "0", id: {…}, …}
1 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
2 : {numberOfRow: 8, nCommande: "4500634818", nLigne: "00050", nEcheance: "0001", id: {…}, …}
3 : {numberOfRow: 4, nCommande: "4500634818", nLigne: "00010", nEcheance: "0001", id: {…}, …}
length : 4
好吧，这出乎意料。
为什么它保留第 4 项而不是像其他的那样删除select并在此基础上再次添加它？
这让我觉得还有另一个我不知道的用于比较的数组。
那onChange呢？ :
此外
onChange 结果完全符合预期：
ngOnInit() {
this.selection.onChange.subscribe(x=> {
console.log(x);
});
}
shift-click 从第一项到第六项再返回：
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(0), removed: Array(1)}
{source: SelectionModel, added: Array(1), removed: Array(0)}
我检查了它们指示的内容是否完全符合它们应有的内容（正确的项目编号以正确的顺序）。
但视觉效果不尽如人意。
抄送真的会失败吗？ :
另一个实验：
我在介绍中提到 object 的副本将被拒绝： 这是真的。
如果我对我们目前的功能 ctrl 代码执行此操作，它就会停止运行（顺便说一句，这是导入的 underscorejs 库，它是一个浅层克隆，但它不会省略底层，它使用它们的内存引用）:
} else if(event.ctrlKey || checkbox) {
const bb = _.clone(row);
this.selection.toggle(bb);
}
这种方法也会发生同样的事情（这是一个深度克隆）：
} else if(event.ctrlKey || checkbox) {
const bb = jQuery.extend(true, {}, row);
this.selection.toggle(bb);
}
这些行不再在视觉上 select 使用 ctrl-click 编辑，但控制台记录了 selection 阵列，selection 的所有其他方面仍然完美无缺。
Angular、Material、OS、TypeScript、浏览器的哪些版本？ :
windows 专业版 10 64 位 chrome
{
"name": "web.ui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --aot",
"build": "ng b --prod",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/cdk": "^6.1.0",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.1.0",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@types/underscore": "^1.8.7",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.3",
"file-saver": "^1.3.8",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"ng2-ion-range-slider": "^2.0.0",
"ngx-bootstrap": "^3.0.0",
"ngx-dropzone-wrapper": "^6.1.0",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.0.0-rc.0",
"typescript": "2.7.2",
"underscore": "^1.8.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.5",
"@angular/cli": "^6.0.5",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "^2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.1.3",
"codelyzer": "^4.2.1",
"postcss-modules": "^1.1.0",
"protractor": "~5.3.0",
"ts-node": "~6.0.5",
"tslint": "~5.10.0"
}
}
好的，我想通了，这对你们中的一些人来说似乎是我给出的问题中的一个未知数，所以你们不可能猜到，因为我没有给你们我的全部组件和其他人看起来很明显，因为您对 mat table 非常了解，并且您可以从我的变量命名中看出有什么不对劲，
我有一组四个局部变量，用于处理我的对象的四个步骤，从它从 API 到达到它在 mat-table 中可视化显示。
// [ 1 ] this first gets the api object and will serve as a store
originalDataSet:Array<object>;
// [ 2 ] rendered after filters
filteredDataSet:Array<object>;
// [ 3 ] sclice step (needs to be second to last due to dual slider for size)
dataSlice = [];
// [ 4 ] final. what actually is queried by Mat Table
@ViewChild(MatSort) sort: MatSort;
dataSource: MatTableDataSource<any>;
行（对象）在 1 和 4 之间确实相同，但自那以后很多行（对象）都丢失了。
这并没有回答为什么 javascript 认为一个对象的两个副本不一样，但它确实回答了为什么我提供给 toggle() 方法的对象被认为与row
现在 this.dataSource.filteredData 我实际上是在迭代与垫子 table 相同的数组。
这不会导致页面切换和 shift-clicking 等缺陷。
（除了不从第一页选择项目外，它不能再迭代，因为它们不在当前列表中，这是我一开始想避免的，但我会解决这个问题一)
如果有人知道为什么 js 无法将对象的副本视为与自身相等，我很想知道答案。
如果有人能看到这个对象如何不符合 mat table 的选择模型的标准以及我是如何愚弄它的，我也很想知道。
我愿意将您标记为答案并给予 50 点赏金。