Angular 15 多选下拉框问题：多选产品并保存至数据库

现有代码问题分析 #

1. 原生<select>未添加multiple属性，默认是单选模式，无法实现多选
2. [(ngModel)]绑定的slaexclusion.productId若为单个值类型，无法存储多个选中的ID数组
3. HTML中未绑定selectProduct事件，选中逻辑无法触发

修正方案：原生select实现多选 #

1. 调整HTML代码

添加multiple属性，绑定数组类型的ngModel，同时绑定change事件处理选中逻辑：

<div class="form-group row justify-content-start">
  <div class="col-sm-3 text-end">
    <label>
      Products:
    </label>
  </div>
  <div class="col-sm-3">
    <!-- 添加multiple属性，绑定数组类型的selectedProductIds -->
    <select name="product" multiple required class="form-control" [(ngModel)]="selectedProductIds" (change)="onProductChange($event)">
      <option *ngFor="let product of products" [value]="product.id">{{product.name}}</option>
    </select>
  </div>
</div>

2. 调整TypeScript代码

定义数组存储选中ID，修正事件处理逻辑：

// 存储选中的产品ID数组
selectedProductIds: number[] = [];
// 确保slaexclusion的productId为数组类型
slaexclusion: { productId?: number[]; /* 其他属性 */ } = {};

onProductChange(event: Event) {
  const selectEl = event.target as HTMLSelectElement;
  // 提取所有选中的选项值并转为数字数组
  this.selectedProductIds = Array.from(selectEl.selectedOptions).map(opt => Number(opt.value));
  // 赋值给实体对象
  this.slaexclusion.productId = this.selectedProductIds;
  console.log('选中的产品ID:', this.selectedProductIds);
}

C#后端处理 #

确保实体类中对应字段为数组/列表类型，适配多选数据：

public class SlaExclusion
{
    // 其他业务属性
    // 用List<int>存储多个产品ID
    public List<int> ProductId { get; set; } = new List<int>();
}

数据库存储方案

• 方案1：JSON存储（快速实现）
  将数组序列化为JSON字符串存入数据库的nvarchar(max)字段：

  // 保存时序列化
  slaExclusion.ProductIdJson = JsonSerializer.Serialize(slaExclusion.ProductId);
  // 查询时反序列化
  slaExclusion.ProductId = JsonSerializer.Deserialize<List<int>>(slaExclusion.ProductIdJson);
  

• 方案2：多对多关联（规范设计）
  创建中间表SlaExclusionProduct关联SlaExclusion和Product，通过EF Core配置多对多关系，直接保存关联数据，更符合数据库设计规范。

ng-multiselect-dropdown组件无效排查 #

如果要使用第三方组件，按以下步骤确认配置：

1. 安装依赖：npm install ng-multiselect-dropdown --save
2. 在模块中导入组件：

   import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
   
   @NgModule({
     imports: [
       // 其他导入
       NgMultiSelectDropDownModule.forRoot()
     ]
   })
   

3. 正确配置组件参数：

   <ng-multiselect-dropdown
     [placeholder]="'选择产品'"
     [data]="products"
     [(ngModel)]="selectedProductIds"
     [settings]="dropdownSettings"
     (onSelect)="onItemSelect($event)"
     (onDeSelect)="onItemDeSelect($event)">
   </ng-multiselect-dropdown>
   

   dropdownSettings = {
     singleSelection: false,
     idField: 'id',
     textField: 'name',
     selectAllText: '全选',
     unSelectAllText: '取消全选'
   };
   
   onItemSelect(item: any) {
     console.log('选中产品:', item);
   }
   
   onItemDeSelect(item: any) {
     console.log('取消选中:', item);
   }
   

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