如何将选中的HTML表格行值显示到输入文本框？跨组件实现咨询

嘿，我来帮你搞定这个需求！基于你给出的store模型（也就是你的Equipment表格数据结构），我整理了一套清晰的实现思路和示例代码——看你的代码风格应该是Angular项目，所以我就用Angular来做演示啦～

核心实现思路 #

• 第一步：在表格组件中监听行选中事件，把选中的store对象通过组件间通讯机制保存起来（比如共享服务、状态管理工具，简单场景也能用@Output事件）
• 第二步：在目标输入组件中，接收选中的store数据，将各个字段绑定到对应的输入框上
• 第三步：确保数据实时同步，选中不同行时输入框能自动更新内容

1. 先创建一个共享服务（用于组件间通讯） #

这个服务用来统一管理选中的行数据，让表格组件和输入组件都能访问到：

// equipment.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { store } from './store.model';

@Injectable({ providedIn: 'root' })
export class EquipmentService {
  // 用BehaviorSubject保存选中数据，默认值为null
  private selectedEquipmentSubject = new BehaviorSubject<store | null>(null);
  // 对外暴露可观察对象，供其他组件订阅
  selectedEquipment$ = this.selectedEquipmentSubject.asObservable();

  // 更新选中数据的方法
  setSelectedEquipment(equipment: store | null) {
    this.selectedEquipmentSubject.next(equipment);
  }
}

2. 表格组件（Equipment表格） #

实现行选中逻辑，点击行时把数据传给共享服务：

// equipment-table.component.ts
import { Component } from '@angular/core';
import { store } from './store.model';
import { EquipmentService } from './equipment.service';

@Component({
  selector: 'app-equipment-table',
  template: `
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>Park ID</th>
          <th>SN</th>
          <th>Model Type</th>
          <th>State</th>
        </tr>
      </thead>
      <tbody>
        <!-- 循环渲染表格行，点击时触发选中逻辑，给选中行加高亮样式 -->
        <tr 
          *ngFor="let item of equipmentList" 
          (click)="selectRow(item)" 
          [class.selected-row]="item.id === selectedRowId"
        >
          <td>{{ item.id }}</td>
          <td>{{ item.park_id }}</td>
          <td>{{ item.SN }}</td>
          <td>{{ item.ModelType }}</td>
          <td>{{ item.State }}</td>
        </tr>
      </tbody>
    </table>
  `,
  styles: [`
    .selected-row { background-color: #f0f5ff; cursor: pointer; }
    table { border-collapse: collapse; margin: 20px 0; }
    th, td { padding: 8px 12px; text-align: left; }
  `]
})
export class EquipmentTableComponent {
  // 模拟表格数据，实际项目中可以从后端接口获取
  equipmentList: store[] = [
    { id: 1, park_id: 'P001', BonMvt: ['M001'], SN: 'SN001', reference: 'REF001', ModelType: 'TypeA', State: 'Active', isActived: 'Y' },
    { id: 2, park_id: 'P002', BonMvt: ['M002'], SN: 'SN002', reference: 'REF002', ModelType: 'TypeB', State: 'Inactive', isActived: 'N' },
    { id: 3, park_id: 'P003', BonMvt: ['M003', 'M004'], SN: 'SN003', reference: 'REF003', ModelType: 'TypeC', State: 'Active', isActived: 'Y' }
  ];
  selectedRowId: number | null = null;

  constructor(private equipmentService: EquipmentService) {}

  // 选中行时的逻辑
  selectRow(item: store) {
    this.selectedRowId = item.id;
    // 把选中的行数据传给共享服务
    this.equipmentService.setSelectedEquipment(item);
  }
}

3. 输入框组件（显示选中数据） #

订阅共享服务的选中数据，将字段绑定到输入框：

// equipment-form.component.ts
import { Component, OnInit } from '@angular/core';
import { store } from './store.model';
import { EquipmentService } from './equipment.service';

@Component({
  selector: 'app-equipment-form',
  template: `
    <div class="form-container">
      <h3>设备详情</h3>
      <!-- 如果没有选中数据，提示用户选择 -->
      <div *ngIf="!selectedEquipment" class="empty-tip">请选中表格中的一行数据</div>
      
      <!-- 有选中数据时渲染输入框 -->
      <div *ngIf="selectedEquipment" class="form-content">
        <label>ID: <input type="text" [(ngModel)]="selectedEquipment.id" disabled></label><br>
        <label>Park ID: <input type="text" [(ngModel)]="selectedEquipment.park_id"></label><br>
        <label>SN: <input type="text" [(ngModel)]="selectedEquipment.SN"></label><br>
        <label>Reference: <input type="text" [(ngModel)]="selectedEquipment.reference"></label><br>
        <label>Model Type: <input type="text" [(ngModel)]="selectedEquipment.ModelType"></label><br>
        <label>State: <input type="text" [(ngModel)]="selectedEquipment.State"></label><br>
        <label>Is Actived: <input type="text" [(ngModel)]="selectedEquipment.isActived"></label><br>
        <!-- 处理BonMvt数组，用文本域展示 -->
        <label>BonMvt: <textarea rows="3">{{ selectedEquipment.BonMvt.join(', ') }}</textarea></label>
      </div>
    </div>
  `,
  styles: [`
    .form-container { margin: 20px 0; padding: 15px; border: 1px solid #eee; border-radius: 4px; }
    .empty-tip { color: #999; padding: 20px 0; }
    .form-content label { display: block; margin: 10px 0; }
    input, textarea { padding: 6px 8px; width: 300px; }
  `]
})
export class EquipmentFormComponent implements OnInit {
  selectedEquipment: store | null = null;

  constructor(private equipmentService: EquipmentService) {}

  ngOnInit() {
    // 订阅共享服务的选中数据，实时更新组件内的变量
    this.equipmentService.selectedEquipment$.subscribe(equipment => {
      this.selectedEquipment = equipment;
    });
  }
}

额外小提示 #

• 如果你的项目用了NgRx这类全局状态管理库，也可以把选中数据放到全局状态中，思路和上面一致
• 要是只需要展示数据不需要编辑，可以把[(ngModel)]换成[value]，避免不必要的双向绑定
• 也可以用复选框实现行选中，只需要把(click)事件换成复选框的(change)事件，逻辑大同小异

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