Angular p-dropdown 从一个选项数组动态创建选项答案

【问题标题】：Angular p-dropdown create options dynamically from one options arrayAngular p-dropdown 从一个选项数组动态创建选项
【发布时间】：2021-07-22 19:04:34
【问题描述】：

我正在尝试在 Angular 中创建多个下拉菜单，并且需要每个下拉菜单都少显示一个选项。我已经做到了这一点，但现在我的下拉菜单总是用一个值初始化。我有多个下拉菜单并尝试使用一个选项数组并根据这些选项生成我的数据。我事先也不知道我需要多少下拉菜单。问题是我还需要一个用户有时不想选择值的空白值。

https://stackblitz.com/edit/primeng-dropdown-demo-4tffmy?devtoolsheight=33&file=src/app/app.component.ts

最好的尊重

【问题讨论】：

标签： angular primeng primeng-dropdowns

【解决方案1】：

我不完全确定您想要做什么，但这对您想要实现的目标有帮助吗？

getOptions(country: Country) {
  let index = this.cities.findIndex(c => c.country === country);
  return this.cities.slice(0,this.cities.length - index);
}

constructor() {
  this.countries = [
    { name: 'USA' },
    { name: 'Italy' },
    { name: 'UK' },
    { name: 'Turkey' },
    { name: 'France' }
  ];

  this.cities = [   
    { name: 'New York', code: 'NY', country: this.countries[0] },
    { name: 'Rome', code: 'RM', country: this.countries[1] },
    { name: 'London', code: 'LDN', country: this.countries[2] },
    { name: 'Istanbul', code: 'IST', country: this.countries[3] },
    { name: 'Paris', code: 'PRS', country: this.countries[4] }
  ];
}

<p-dropdown [options]="getOptions(country)" [ngModel]="dataBind.get(country)" optionLabel="name"
        (onFocus)="createCityOptions()" editable="true" optionLabel="name"></p-dropdown>

如果没有，您可以进一步描述您的意图，我很乐意更新答案。

您可能还想查看此StackBlitz。

【讨论】：

是的，这更接近我想要实现的目标。但是，当用户打开下拉菜单时，仍然有这个空标签。不知何故，下拉菜单被选项数组的第一个值初始化。我希望下拉菜单的行为类似于正常的下拉菜单，但是每个下拉菜单的选项都比前一个下拉菜单少 1 个。下拉菜单的数量总是
我更新了答案，在下拉列表中不包含空值，并且没有初始化值...我还添加了一个 StackBlitz，您可能会对您正在尝试做的事情感兴趣。跨度>
谢谢。这更接近我想要实现的目标。但是我不能让下拉列表可编辑。
嗯，如果可能的话，您可能需要查看文档。下拉菜单通常意味着将用户限制在某些选项中。可能有一些方法可以做到这一点，但我认为这个想法是你要么给他们一个“空”选项（这可以包含你认为在你的逻辑中不可选择的任何值），或者你给他们添加的选项他们自己的选择（您可以在逻辑中随意忽略）。如果你真的想要，你可以通过管道键盘事件来阻止以一种骇人听闻的方式编写可编辑内容，以使该 nativeElement 根本不做任何事情......）