如何在mdtable angular material2中行的点击添加左边框

在mdtable angular material2中，要实现行的点击添加左边框的效果，可以通过以下步骤完成：

1. 首先，确保你已经安装了Angular Material和Angular CDK，并在你的项目中引入了相关的模块。
2. 在你的HTML模板中，使用md-table指令创建一个表格，并在表格中定义列。
3. 在每一行的tr标签上添加一个点击事件，例如(click)="addBorder(row)"，并将当前行的数据对象row作为参数传递给addBorder方法。
4. 在你的组件类中，定义addBorder方法，接收行数据作为参数。
5. 在addBorder方法中，通过给行数据对象添加一个新的属性，例如hasBorder，来标记该行是否需要添加左边框。你可以将hasBorder属性初始化为false。
6. 在addBorder方法中，使用ngFor指令遍历表格的数据源，将除了当前行以外的所有行的hasBorder属性设置为false，表示它们不需要添加左边框。
7. 在addBorder方法中，将当前行的hasBorder属性设置为true，表示它需要添加左边框。
8. 在你的CSS样式文件中，定义一个类似下面的样式规则，用于添加左边框：

.add-border {

 border-left: 2px solid blue;

}

1. 在你的HTML模板中，使用ngClass指令来动态添加样式类。例如，给tr标签添加一个类似下面的指令：

<tr [ngClass]="{'add-border': row.hasBorder}">

这样，当hasBorder属性为true时，该行就会添加左边框。

总结起来，实现在mdtable angular material2中行的点击添加左边框的步骤如下：

1. 安装并引入Angular Material和Angular CDK模块。
2. 在HTML模板中使用md-table指令创建表格，并定义列。
3. 在每一行的tr标签上添加点击事件，并将行数据对象作为参数传递给addBorder方法。
4. 在组件类中定义addBorder方法，通过给行数据对象添加hasBorder属性来标记是否需要添加左边框。
5. 在addBorder方法中，遍历表格数据源，将除了当前行以外的所有行的hasBorder属性设置为false。
6. 将当前行的hasBorder属性设置为true。
7. 在CSS样式文件中定义添加左边框的样式规则。
8. 使用ngClass指令在HTML模板中动态添加样式类。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
• 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
• 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯区块链服务（TBC）：https://cloud.tencent.com/product/tbc
• 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-world