javascript - p-dropdown 未正确显示标签

Question

我无法让下拉组件正常工作。下拉列表似乎检测到它应该显示的项目，因为它根据数组中的项目数量加宽项目列表。然而空格都是空白的。

这与 https://www.primefaces.org/primeng/#/dropdown 中的示例相同的下拉框(第一个标题为“简单”)

但是对我来说它没有显示任何内容。我复制粘贴了完全相同的代码，唯一的区别是导入。当我转到 github 存储库时，我可以看到它们导入了

import {SelectItem} from '../../../components/common/api';

和

import {DropdownModule} from '../../../components/dropdown/dropdown';

我使用的地方

import {SelectItem} from 'primeng/api';

和

import {DropdownModule} from 'primeng/dropdown';

当我尝试使用来自 github 的导入时，它说它可以在这些位置找到 dropdownmodule 和 selectitem。

这是我的代码:

interface City {

  name: string,

  code: string

}
export class Test implements OnInit {

 cities1: City[];

  selectedCity: City;
  constructor() {
    this.cities1 = [
      {label:'Select City', value:null},
      {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
      {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
      {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
      {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
      {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
  ];
   }

}

这是 html

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

有人知道我该如何解决这个问题吗？

谢谢

Answer 1

删除optionLabel并且代码将起作用 -

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" [showClear]="true"></p-dropdown>

OptionLabel : Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.