primeng - 从服务器提取“键入”数据时,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] 标签,但这没有帮助。
解决方案
推荐阅读
- c# - 更改程序集名称破坏了 xaml 命名空间
- c# - 在客户端 PC 上生成 SQL 数据库
- python - 如何更改全息视图中下拉/滑块更新的元素?
- c# - 用 shouldly 测试两个条件
- node.js - TypeError: Client is not a constructor - 最新版本的 kafka-node 出错
- java - 无法通过请求生成器发送 post 参数
- google-cloud-platform - 为 pod 和服务配置 Terraform GKE 插件 IP 范围
- python - 如何确定初始猜测值并最小化以找到参数
- arrays - MongoDB:使用数组进行聚合
- ms-access - 将列表框中的选定项目与单选按钮相结合保存到新字段中