Angular CoreUI MultiSelect无法默认选中API返回值问题咨询

使用Angular的CoreUI MultiSelect组件时，API返回的secondary_campaign_types值（如["Business"]）已通过patchValue设置到表单，但UI中无法默认选中匹配的选项。

组件TS代码 #

import {
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
  SimpleChanges,
} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

interface FormValue {
  office: string;
  secondary_campaign_types: string[];
  billing_currency_code: string;
}

@Component({
  // 组件元数据（原代码未提供，此处省略）
})
export class YourComponent implements OnInit {
  form: FormGroup | undefined;
  customStylesValidated = false;

  @Input() public buyingEntityOfficesListData:
    | BuyingEntityOfficesSelectorModel
    | undefined;
  @Input() public buyingEntityOffice: BuyingEntityOfficeModel | null = null;
  @Input() public currencies: CurrencyModel[] = [];
  @Output() public submitForm = new EventEmitter<BuyingEntityOfficeModel>();

  subs: Subscription[] = [];

  constructor(private formBuilder: FormBuilder) {
    this.buildForm();
  }

  ngOnInit(): void {}

  public ngOnChanges(changes: SimpleChanges): void {
    if (changes['buyingEntityOffice']) {
      const buyingEntityOffice = changes['buyingEntityOffice']
        .currentValue as BuyingEntityOfficeModel;
      if (buyingEntityOffice) {
        if (this.form) {
          this.form.patchValue(this.convertToDisplayable(buyingEntityOffice));
        }
      }
    }
  }

  private convertToDisplayable(
    buyingEntityOffice: BuyingEntityOfficeModel
  ): FormValue {
    return <FormValue>{
      office: buyingEntityOffice.office,
      secondary_campaign_types: buyingEntityOffice.secondary_campaign_types,
      billing_currency_code: buyingEntityOffice.billing_currency_code,
    };
  }

  buildForm(): void {
    this.form = this.formBuilder.group({
      office: ['', Validators.required],
      secondary_campaign_types: [[], Validators.required],
      billing_currency_code: ['', Validators.required],
    });
  }
}

HTML代码 #

<form 
  *ngIf="form" 
  cForm 
  class="row g-3 needs-validation" 
  [formGroup]="form" 
  role="form" 
  novalidate 
  cRow
  class="needs-validation"
>
  <c-row>
    <c-col [md]="6" class="mb-4">
      <label for="inputName" class="mb-2 grey-label">
        Name
        <span class="text-danger">*</span>
      </label>
      <input
        cFormControl
        id="inputName"
        required
        type="text"
        formControlName="office"
      />
      <validation-messages [control]="form.controls.office"></validation-messages>
    </c-col>
  </c-row>

  <c-row>
    <c-col [md]="6" class="mb-4">
      <label for="inputCampaignTypes" class="mb-2 grey-label">
        Campaign Types
        <span class="text-danger">*</span>
      </label>
      <c-multi-select
        multiple 
        id="inputCampaignTypes"
        required
        formControlName="secondary_campaign_types"
      >
        <c-multi-select-option>House</c-multi-select-option>
        <c-multi-select-option>Business</c-multi-select-option>
        <c-multi-select-option>Marketing</c-multi-select-option>
        <c-multi-select-option>Author</c-multi-select-option>
      </c-multi-select>
      <validation-messages [control]="form.controls.secondary_campaign_types"></validation-messages>
    </c-col>
  </c-row>

  <c-row>
    <c-col [md]="6" class="mb-4">
        <label for="inputCurrency" class="mb-2 grey-label">
            Billing currency
            <span class="text-danger">*</span>
        </label>
        <select 
            cSelect 
            id="inputCurrency" 
            formControlName="billing_currency_code"
        >
            <option value="">--Select--</option>
            <option *ngFor="let item of currencies" [value]="item.code">
              {{ item.code }}
            </option>
        </select>
        <validation-messages [control]="form.controls.billing_currency_code"></validation-messages>
    </c-col>
  </c-row>
</form>

API返回数据 #

{
    "id": 56,
    "buying_entity_id": 45,
    "office": "test",
    "billing_currency_code": "EUR",
    "secondary_campaign_types": [
        "Business"
    ]
}

核心问题是CoreUI MultiSelect组件需要选项的value属性与表单值匹配才能选中，你当前的选项仅提供了显示文本，未指定value，导致组件无法识别匹配项。

1. 为MultiSelect选项添加value属性 #

修改HTML中的<c-multi-select-option>，给每个选项设置与API返回值完全一致的value：

<c-multi-select
  multiple 
  id="inputCampaignTypes"
  required
  formControlName="secondary_campaign_types"
>
  <c-multi-select-option value="House">House</c-multi-select-option>
  <c-multi-select-option value="Business">Business</c-multi-select-option>
  <c-multi-select-option value="Marketing">Marketing</c-multi-select-option>
  <c-multi-select-option value="Author">Author</c-multi-select-option>
</c-multi-select>

2. 验证表单值匹配 #

确保API返回的secondary_campaign_types数组中的值（如"Business"）和选项的value完全一致，包括大小写、空格等。你的API返回值与选项文本一致，设置value后即可自动匹配选中。

3. 处理异步数据加载问题（可选） #

如果buyingEntityOffice是异步加载的，可能在组件初始化完成前触发ngOnChanges，可以通过延迟赋值确保组件已就绪：

public ngOnChanges(changes: SimpleChanges): void {
  if (changes['buyingEntityOffice']) {
    const buyingEntityOffice = changes['buyingEntityOffice'].currentValue as BuyingEntityOfficeModel;
    if (buyingEntityOffice && this.form) {
      setTimeout(() => {
        this.form?.patchValue(this.convertToDisplayable(buyingEntityOffice));
      }, 0);
    }
  }
}

4. 确认表单值已正确设置 #

可以在patchValue后打印表单值，验证secondary_campaign_types是否正确赋值：

this.form.patchValue(this.convertToDisplayable(buyingEntityOffice));
console.log(this.form.get('secondary_campaign_types')?.value); // 预期输出：["Business"]

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