如何在不使用复选框的情况下在角度材料数据表上设置默认行选择答案

【问题标题】：How to set default row selection on an angular material data table without using checkbox如何在不使用复选框的情况下在角度材料数据表上设置默认行选择
【发布时间】：2020-01-05 21:45:04
【问题描述】：

我是角度和角度材料的新手。如果问的问题本质上非常琐碎，请道歉。

我一直在开发一个应用程序，该应用程序包含一个带有角度材料数据表的组件。

该表包含从服务中获取的信息。

我的要求是通过在角度材料表中用颜色突出显示来预先选择其中一条记录（数据表中的第一条），并在同一组件中以与表格相邻的形式呈现该行中的信息.

如果用户选择了角度材料数据表中的任何其他行，表单应该重新加载表单中新选择的记录信息

我看过一些带有复选框的例子，但我不打算对表中的记录进行任何多选操作。

下面的截图可以看到我的需求示例

【问题讨论】：

你确定数据表是最好的方法吗？真的有必要吗？您是否考虑使用 List 代替？ material.angular.io/components/list/api
我正在考虑数据表，因为在这种情况下呈现的记录数可能数百甚至数千。由于材料表带有分页，我认为最好使用数据表来满足此要求。表格也支持排序，这可能是与表格一起使用的另一个考虑因素

标签： angular angular-material angular-material-table

【解决方案1】：

它只是在你的 .ts 中添加一个变量，例如selectedIndex。然后在定义 mat-row 的部分可以使用类似

<tr mat-row *matRowDef="let row; columns: displayedColumns;let i = index"
     [style.background]="i==selectedIndex?'red':'inherit'"
     (click)="selectedIndex=i">
</tr>

在这种情况下，我只更改 [style.background]，您可以使用 [ngClass]="{'yourClass':i==selectedIndex}" 并在您的 .css 中定义类

首先，使 selectedIndex 等于 0

参见stackblitz中的示例

【讨论】：

嗨，Eliseo，我看到你已经设置了 ngClass。但是如果必须捕获第一行来加载表单，我该怎么做？我需要从 selectedIndex 指向的记录中捕获数据以加载表单，默认情况下，这应该发生在组件加载时表中的第一行并在每次用户更改选择时重新加载。