Angular响应式表单：为ngx-table配置Mat-Select多选默认选中

核心思路 #

因为你是在表格里处理多行独立的表单控件，所以必须用FormArray来管理每一行的表单组。每一行对应一个FormGroup，里面包含产品名称、版本（若仅展示可不用放进表单），以及存储选中用户的FormControl（多选下拉对应数组值）。

步骤1：定义数据接口 #

先明确数据结构，方便后续处理：

// 用户接口
interface User {
  id: number;
  name: string;
  // 其他用户属性
}

// 产品及购买用户接口
interface ProductWithBuyers {
  productName: string;
  productVersion: string;
  boughtByUserIds: number[]; // 存储购买用户ID，比存整个对象更高效
}

步骤2：组件中初始化表单 #

在组件类中声明表单数组，待Observable数据加载完成后，将每个产品转换为表单组：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormGroup, FormControl } from '@angular/forms';
import { Observable, combineLatest } from 'rxjs';

@Component({
  selector: 'app-product-buyers',
  templateUrl: './product-buyers.component.html',
  styleUrls: ['./product-buyers.component.css']
})
export class ProductBuyersComponent implements OnInit {
  allUsers$: Observable<User[]>;
  productsBoughtBy$: Observable<ProductWithBuyers[]>;
  productFormArray: FormArray;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 合并两个Observable，确保数据全部加载完成
    combineLatest([this.allUsers$, this.productsBoughtBy$]).subscribe(([allUsers, products]) => {
      // 初始化表单数组
      this.productFormArray = this.fb.array(
        products.map(product => this.fb.group({
          productName: [product.productName],
          productVersion: [product.productVersion],
          selectedBuyers: [product.boughtByUserIds] // 默认选中该产品的购买用户ID数组
        }))
      );
    });
  }

  // 方便模板中获取每一行的FormGroup
  get productGroups(): FormGroup[] {
    return this.productFormArray.controls as FormGroup[];
  }
}

步骤3：模板绑定（ngx-table + mat-select） #

配置ngx-table列，第三列使用mat-select多选并绑定对应表单控件：

<ngx-table [data]="productGroups">
  <!-- 产品名称列 -->
  <ngx-column name="productName" title="产品名称">
    <ng-template let-row="row">{{ row.get('productName').value }}</ng-template>
  </ngx-column>

  <!-- 产品版本列 -->
  <ngx-column name="productVersion" title="产品版本">
    <ng-template let-row="row">{{ row.get('productVersion').value }}</ng-template>
  </ngx-column>

  <!-- 购买用户多选列 -->
  <ngx-column name="selectedBuyers" title="购买用户">
    <ng-template let-row="row">
      <mat-select [formControl]="row.get('selectedBuyers')" multiple>
        <mat-option *ngFor="let user of allUsers$ | async" [value]="user.id">
          {{ user.name }}
        </mat-option>
      </mat-select>
    </ng-template>
  </ngx-column>
</ngx-table>

关键注意点 #

• 多选值比较：如果selectedBuyers存储的是用户对象而非ID，需给mat-select设置[compareWith]函数，避免Angular无法识别对象相等：

  <mat-select [formControl]="row.get('selectedBuyers')" multiple [compareWith]="compareUsers">
  

  组件类中添加比较函数：

  compareUsers(user1: User, user2: User): boolean {
    return user1 && user2 ? user1.id === user2.id : user1 === user2;
  }
  

• 表单值获取：提交表单时，直接取this.productFormArray.value，即可得到所有行的产品信息和选中的用户ID（或对象）数组。

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