Question

我刚刚安装了angular 4 multiselect下拉列表，以显示使用服务从JSON脚本获取的数据。我正在属性中获取数据，但现在我想在多选下拉列表中显示它，以便可以使用多个值并将它们分配给下一个属性。因此，在下面的代码中，我正在调用getSubject的方法，它会向我返回this.subject属性中的数据。

this._curriculumService.getSubject(this.appSession.tenant.tenancyName)
.finally(() => {this.saving = false;})
.subscribe((result: listResultDtoOfSubjectDto) => {
  this.subjects = result.items;

  this.id = this.subjects.map(a => a.code);
  this.itemName = this.subjects.map(a => a.name);

})

现在我想在angular 4下拉菜单中选择此数据，这是我component.ts文件中的代码。问题是下拉菜单要求属性的特定ID和名称，然后才能显示下拉菜单中的数据，但在我的情况下，我有name和code返回了{ {1}}。那么如何在此下拉列表中显示数据

this.subjects

HTML代码

optionsModel: number[];
myOptions: IMultiSelectOption[];
this.myOptions = [
  { id: 1, name: 'Physics' },
  { id: 2, name: 'English' },
  { id: 3, name: 'English' },
  { id: 4, name: 'Programming'}
];

Answer 1

因此，请勿将myOptions的类型声明为IMultiSelectOption[]，而应将其保留为您从服务中收到的任何内容。由于此插件要求每个选项都具有ID，因此，您可以在从服务响应接收到该属性后将该属性添加到myOptions对象中。因此，请确保属性应具有唯一值（例如，主题代码）。让this.subjects是您从服务中获得的对象数组：

optionsModel: number[];
subjects: any;
this.subjects = [
  { code: 11, name: 'Physics' },
  { code: 12, name: 'English' },
  { code: 13, name: 'English' },
  { code: 14, name: 'Programming'}
];
this.subjects.forEach(function(e) { e.id = e.code });

最后一行将为每个对象添加id属性，其值与主题代码相同。现在，该下拉列表将按预期工作。

Demo Example

Angular 4下拉多选不显示属性数据

1 个答案: