Angular 2中Angular Material Mat-table选中行无法在输出窗口显示

嘿，我来帮你把选中的行数据从控制台搬到页面上展示！其实核心就是把你已经拿到的选中行数据绑定到组件变量，然后在模板里渲染出来，具体步骤如下：

1. 在组件类中添加存储选中行的变量 #

首先，在你的组件.ts文件里，定义一个数组变量用来存选中的行数据，比如：

// 组件类里的代码
selectedRows: any[] = []; // 初始化空数组，用来存选中的行

// 你的"转移选中行"点击事件处理函数
onTransferSelectedRows() {
  // 假设你已经通过Angular Material的selection拿到了选中行，比如this.selection.selected
  this.selectedRows = [...this.selection.selected]; // 把选中行赋值给变量
  console.log('选中的行:', this.selectedRows); // 保留控制台输出方便调试
}

2. 在模板中添加展示区域 #

接下来在你的组件.html模板里，找个合适的位置添加展示选中行的区域，比如用*ngFor循环渲染每一行的数据：

<!-- 假设这是你的表格和按钮 -->
<button mat-button (click)="onTransferSelectedRows()">转移选中行</button>

<!-- 选中行展示区域 -->
<div *ngIf="selectedRows.length > 0" class="selected-rows-container">
  <h3>已选中的行:</h3>
  <div *ngFor="let row of selectedRows" class="selected-row-item">
    <!-- 这里替换成你表格里的实际字段，比如row.id, row.name等 -->
    ID: {{row.id}}，名称: {{row.name}}
  </div>
</div>

<!-- 如果没有选中行，显示提示 -->
<div *ngIf="selectedRows.length === 0" class="no-selection">
  还没有选中任何行哦~
</div>

3. 可选：添加样式优化展示效果 #

你可以加一点CSS让展示区域更美观：

.selected-rows-container {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.selected-row-item {
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.no-selection {
  margin-top: 20px;
  color: #666;
  font-style: italic;
}

这样一来，当你选中行点击按钮后，选中的行数据就会直接展示在页面上啦！如果你的行数据结构比较复杂，只需要调整模板里的字段绑定就行，比如row.xxx对应你实际的属性名。

内容的提问来源于stack exchange，提问作者Heena