如何将p-table行内p-dropdown选中的productId存入TS数组？

步骤1：TS文件准备 #

在组件类中定义核心变量与同步方法：

• products：从API获取的产品列表（包含productId和productName）
• tableData：表格的数据源（每行需带唯一标识，比如id）
• rowSelectedProducts：存储每行选中的productId，用行的唯一标识做key，避免选中值冲突
• selectedProductId：最终要收集的所有选中productId数组

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

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html'
})
export class ProductComponent {
  products: { productId: number; productName: string }[] = [];
  tableData: { id: number; /* 其他业务字段 */ }[] = [];
  rowSelectedProducts: { [rowId: string]: number } = {};
  selectedProductId: number[] = [];

  // 同步选中的productId到目标数组
  syncSelectedProductIds() {
    // 过滤未选中的空值（可根据需求移除该过滤）
    this.selectedProductId = Object.values(this.rowSelectedProducts).filter(id => !!id);
  }
}

步骤2：HTML模板调整 #

在p-table的行模板中，给每个p-dropdown绑定对应选中值，并监听选中变化事件：

<p-table [value]="tableData">
  <ng-template pTemplate="header">
    <tr>
      <th>产品选择</th>
      <!-- 其他表头列 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td>
        <p-dropdown
          [options]="products"
          optionLabel="productName" <!-- 下拉框显示的文本字段 -->
          optionValue="productId" <!-- 下拉框选中的value直接为productId -->
          [(ngModel)]="rowSelectedProducts[rowData.id]" <!-- 绑定当前行的选中值 -->
          (ngModelChange)="syncSelectedProductIds()" <!-- 选中变化时同步目标数组 -->
          placeholder="请选择产品"
        ></p-dropdown>
      </td>
      <!-- 其他表格列 -->
    </tr>
  </ng-template>
</p-table>

关键细节说明 #

1. optionValue="productId"：直接将下拉框选中值设为productId，无需额外从products数组中匹配id，简化逻辑
2. rowSelectedProducts[rowData.id]：用行数据的唯一标识作为key，确保每行选中值独立存储，不会因表格排序、分页导致选中值混乱
3. syncSelectedProductIds()：每次选中变化时，提取所有有效选中的productId更新目标数组，若允许取消选择，filter(id => !!id)会自动过滤空值

备选方案（手动维护数组） #

如果不想用对象中转，也可以直接在选中事件里手动更新selectedProductId数组：

// TS中替换sync方法为以下代码
onProductSelect(selectedId: number, rowId: string) {
  this.rowSelectedProducts[rowId] = selectedId;
  this.selectedProductId = Object.values(this.rowSelectedProducts).filter(id => !!id);
}

<!-- HTML中修改ngModelChange事件 -->
(ngModelChange)="onProductSelect($event, rowData.id)"

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