Angular 2+：点击数据表格行后将行数据传入子组件并显示

嘿，刚接触Angular遇到这种问题太正常了，别担心！你已经搞定了父组件获取行数据的核心步骤（控制台能打印就说明这部分逻辑没问题），接下来只需要调整子组件的输入属性定义和模板展示逻辑就行，我一步步给你讲清楚：

1. 给子组件定义接收对象的输入属性 #

首先在子组件的.ts文件里，用@Input()装饰器声明一个用来接收行数据的属性，最好给它指定类型（如果你的数据有固定结构，建议先定义一个接口，这样代码更规范易维护）：

import { Component, Input } from '@angular/core';

// 先定义你的行数据结构（示例用用户数据，你可以根据实际字段修改）
interface TableRowData {
  id: number;
  name: string;
  email: string;
  // 其他字段按需添加
}

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent {
  // 用@Input()标记这个属性，允许父组件向它传值
  // 初始值设为null，避免一开始没选中行时出现未定义错误
  @Input() selectedRow: TableRowData | null = null;
}

如果暂时不确定数据结构，也可以把类型改成any，不过还是推荐用接口，后续维护更省心。

2. 父组件把选中的行数据绑定到子组件 #

在父组件里，你应该已经有一个变量存储选中的行数据了（比如叫currentSelectedRow），然后在父组件的模板里，给子组件标签加上属性绑定：

<!-- 父组件模板中的子组件标签 -->
<app-child-component [selectedRow]="currentSelectedRow"></app-child-component>

同时确认父组件的行点击事件里，正确给这个变量赋值：

// 父组件.ts文件中的代码
currentSelectedRow: TableRowData | null = null;

onRowClick(row: TableRowData) {
  console.log(row);
  this.currentSelectedRow = row; // 把点击的行数据赋值给变量，传给子组件
}

3. 子组件模板里展示对象数据 #

因为一开始可能没有选中行，selectedRow会是null，所以要先判断数据存在再展示，避免空指针错误，有两种常用方式：

方式一：用安全导航操作符?. #

直接在模板里用?.访问对象属性，它会自动判断对象是否存在，不存在就不渲染对应内容：

<div class="selected-row-info">
  <h4>选中的行详情</h4>
  <p>ID: {{ selectedRow?.id }}</p>
  <p>名称: {{ selectedRow?.name }}</p>
  <p>邮箱: {{ selectedRow?.email }}</p>
</div>

方式二：用*ngIf包裹（更直观） #

如果想在没有选中数据时显示提示，可以用*ngIf判断数据存在，否则展示提示内容：

<div *ngIf="selectedRow; else noRowSelected">
  <h4>选中的行详情</h4>
  <p>ID: {{ selectedRow.id }}</p>
  <p>名称: {{ selectedRow.name }}</p>
  <p>邮箱: {{ selectedRow.email }}</p>
</div>
<ng-template #noRowSelected>
  <p>请点击表格中的一行查看详情</p>
</ng-template>

这样调整之后，你点击父组件的表格行，子组件就能正确展示对应的对象数据啦！

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