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

Question

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

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

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

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

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

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

从下面的屏幕截图中可以看到我的要求示例

Answer 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中的示例