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

Question

我是棱角和棱角材料的新手。如果问题本质上问得太琐碎，请表示歉意。

我一直在开发一个组件，该组件的组件带有角材料数据表。

该表具有从服务中获取的信息。

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

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

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

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

Answer 1

仅在.ts中添加变量，例如selectedIndex。然后，在定义行的部分中，您可以使用类似

<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

中的示例