首页 > 解决方案 > 从服务器提取“键入”数据时,PrimeNG 多选未绑定在模型驱动表单中

问题描述

我正在以反应 Angular 形式使用 PrimeNG Multiselect。

我可以通过 chrome 开发工具看到从服务器返回的值数组,但我不知道如何让它绑定到多选。

在组件和应用模块中导入模块:

import { MultiSelectModule } from 'primeng/multiselect';

模板:

    <p-multiSelect [options]="activities" [optionLabel]="ActivityName" [panelStyle]="{minWidth: '300px'}" [showHeader]="true" formControlName="selectedActivities"></p-multiSelect>

班级:

export class ChemicalEditComponent implements OnInit {
  activities: ActivityType[];
  selectedActivities: ActivityType[];

    constructor(
        private _chemicalService: ChemicalService,
        private fb: FormBuilder
    ) {
        this.getActivities();
        this.getSelectedActivities();
        this.createForm();
    }

    ngOnInit() {
      this.getChemical();
    }

    getActivities(): void {
        this._chemicalService.getActivities().subscribe(result => this.activities = result);
    }

  getSelectedActivities(): void {
    this._chemicalService.getActivitiesByChemical(this.chemicalId).subscribe(result => this.selectedActivities = result);
  }

  createForm() {
    this.chemicalForm = this.fb.group({
      brandName: '',
      commonName: '',
      formulation: '',
      selectedActivities: ''
    });
  }

  rebuildForm() {
    this.chemicalForm.reset({
      brandName: this.chemical.BrandName,
      commonName: this.chemical.CommonName,
      formulation: this.chemical.Formulation,
      selectedActivities: this.selectedActivities
    });
  }

从服务器返回的 json 如下所示:

0:{ActivityTypeId: 61, ActivityName: "Driving"}
1:{ActivityTypeId: 62, ActivityName: "Strolling"}

我看到所有示例都使用“标签”和“值”,但我的示例是从服务器输入的。我假设问题是我需要指定标签和值是什么,所以我添加了 [optionLabel] 标签,但这没有帮助。

标签: primeng

解决方案


推荐阅读