Angular2 Teradata 共价数据表 rowSelect 问题答案

【问题标题】：Angular2 Teradata Covalent Data Table rowSelect IssueAngular2 Teradata 共价数据表 rowSelect 问题
【发布时间】：2017-02-15 22:20:20
【问题描述】：

我有一个使用 Teradata 共价数据表组件的 Angular2 Web 应用程序，并启用了数据分页和行选择。数据是通过 REST api 以小块的形式提取的，而不是一次提取所有行，因此在来回分页期间不会自动呈现行选择。即，如果我在第 1 页上选择一行，然后导航到第 2 页，然后返回第 1 页，则第 1 页上的选定行未突出显示。

我不确定这是否可以通过 blah.component.html 文件中的模板条目来处理，或者我是否需要在 blah.component.ts (TypeScript) 文件中执行某些操作。

在选择和取消选择行时，我会跟踪数字数组中选定行的唯一 ID。在.ts文件中 --> selectedItems: number[];

数据表的html代码如下：

<td-data-table [data]="items.content" [columns]="columns" [sortable]="true" [sortBy]="sortBy" [sortOrder]="sortOrder" [selectable]="true" [multiple]="true" (sortChange)="sort($event)" (rowSelect)="selectRow($event)" (selectAll)="selectAllRows($event)">
<template tdDataTableTemplate="matchCount" let-value="value" let-row="row" let-column="column">
    <div layout="row">
        <span flex>{{value | number:0}}</span>
    </div>
</template>
<template tdDataTableTemplate="itemSize" let-value="value" let-row="row" let-column="column">
    <div layout="row">
        <span flex>{{value | bytes}}</span>
    </div>
</template>

【问题讨论】：

尝试在中添加 [(ngModel)]="selectedRows" ，该数组将自动从数组中添加和删除选定的行。如果您不进行服务器端分页，它的工作正常。我还没有检查这个服务器端分页。
非常感谢维奈的回复。实际上，我在发布这个问题后不久就添加了确切的代码 sn-p，结果好坏参半。现在确实将所选行添加到“selectedRows”变量中并在其中进行跟踪，但是在来回分页时，UI 不会使用先前选择的信息进行更新。我想知道是不是因为我们在每个页面事件中加载了一小部分数据，而不是对完整的数据集进行分页。

标签： angular teradata

【解决方案1】：

我联系了 gitter Teradata/covalent 聊天组，他们能够帮助我。您只需遍历 selectedRows 中的值和新数据集中的值即可查找任何匹配项。如果找到匹配项，只需使用 .splice 将其从 selectedRows 中删除，然后从数据集中重新添加。实际上，它只是手动更新 ngmodel。

this.selectedRows.splice(parseInt(x),1,this.newRow.content[y]);

【讨论】：