Angular项目出现Cannot create property 'label' on string报错，寻求解决方案

各位下午好，我在开发中遇到报错：Cannot create property 'label' on string，尝试多种方案后仍未解决，恳请各位提供帮助！

相关代码 #

HTML #

<po-select
    name="select"
    p-label="PO Select"
    [p-options]="empresas"
    p-field-value="fieldValue"
    p-field-label="fieldLabel"
>
</po-select>

<form #fOption="ngForm">
    <div class="po-row">
        <po-select
            class="po-md-6"
            p-label="p-field-label"
            [p-options]="labels"
            [(ngModel)]="fieldLabel"
        >
        </po-select>

        <po-select
            class="po-md-6"
            p-label="p-field-value"
            [p-options]="values"
            [(ngModel)]="fieldValue"
        >
        </po-select>
    </div>
</form>

TypeScript #

empresas: Array<any> = [
    {
      codigo: 1,
      nomeFantasia: "TOTVS SA",
      razaoSocial: "TOTVS LTDA ",
      label: "Company TOTVS SA",
      cnpj: "01.234.567/0000-01",
      value: "0",
      id: 1,
      email: "jhon@teste.com"
    },
    {
      codigo: 2,
      nomeFantasia: "TOTVS SA",
      razaoSocial: "TOTVS LTDA ",
      label: "Company TOTVS SA",
      cnpj: "02.345.678/0000-01",
      value: "20",
      id: 2,
      email: "vick@teste.com"
    },
    {
      codigo: 3,
      nomeFantasia: "TOTVS SA",
      razaoSocial: "TOTVS LTDA ",
      label: "Company TOTVS SA",
      cnpj: "03.456.789/0000-01",
      value: "30",
      id: 3,
      email: "watson@teste.com"
    },
  ]

labels: Array<string> = [
    'nomeFantasia',
    'label',
    'razaoSocial',
    'email'
]

values: Array<string> = [
   'codigo',
   'cnpj',
   'value',
   'id'  
]

fieldLabel = 'nomeFantasia';
fieldValue = 'codigo';

@Input('p-options') set options(options: Array<PoSelectOption | any>) {
    if (this.fieldLabel && this.fieldValue) {
      options.map(option => {
        option.label = option[this.fieldLabel];
        option.value = option[this.fieldValue];
      })
    }
    this._options = options;
    removeDuplicatedOptions(this._options);
    removeUndefinedAndNullOptions(this._options); 
    this.onUpdateOptions();
}

问题分析 #

报错根源是：页面中下方两个po-select绑定的labels和values是字符串数组，当它们触发options setter时，代码会尝试给数组中的每一个字符串添加label属性——但字符串是原始类型，无法动态添加属性，因此抛出错误。

解决方案 #

方案1：在setter中兼容字符串类型的选项 #

修改options setter，先判断每个选项的类型，仅对对象类型的选项添加label和value，字符串类型直接转为标准的PoSelectOption格式：

@Input('p-options') set options(options: Array<PoSelectOption | any>) {
    if (this.fieldLabel && this.fieldValue) {
      this._options = options.map(option => {
        // 仅处理对象类型的选项
        if (typeof option === 'object' && option !== null) {
          return {
            ...option,
            label: option[this.fieldLabel],
            value: option[this.fieldValue]
          };
        } else {
          // 字符串类型转为标准选项格式
          return { label: String(option), value: String(option) };
        }
      });
    } else {
      this._options = [...options];
    }
    removeDuplicatedOptions(this._options);
    removeUndefinedAndNullOptions(this._options); 
    this.onUpdateOptions();
}

方案2：提前将字符串数组转为标准选项数组 #

在组件中把labels和values转成符合PoSelectOption格式的对象数组，再绑定到po-select上：

// 组件内新增转换后的数组
labelsOptions = this.labels.map(item => ({ label: item, value: item }));
valuesOptions = this.values.map(item => ({ label: item, value: item }));

修改HTML中的绑定：

<po-select
    class="po-md-6"
    p-label="p-field-label"
    [p-options]="labelsOptions"
    [(ngModel)]="fieldLabel"
>
</po-select>

<po-select
    class="po-md-6"
    p-label="p-field-value"
    [p-options]="valuesOptions"
    [(ngModel)]="fieldValue"
>
</po-select>

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