Question

我有使用PrimeNg p-dropdown的组件 HTML代码：

<p-dropdown [style]="{'width':'150px'}" [options]="portNames" placeholder="Select a Port">
</p-dropdown>

ts portNames decleration：

portNames: string[] =["Port 01","Port 02", "Port 03"];

我的问题是DropDown不显示值＆＃34;端口01＆＃34;，＆＃34;端口02＆＃34;，＆＃34;端口03＆＃34;。

也许我有任何错误？

Answer 1

portNames应该是由标签和值（不是字符串数组）组成的对象数组：

portNames = [
        {label:'Port 01', value:'p01'},
        {label:'Port 02', value:'p02'},
        {label:'Port 03', value:'p03'}
        ];

请参阅Plunker

Answer 2

尝试在标签和值中添加下拉值

portNames =[
{label:'Port 01', value:'Port 01'},
{label:'Port 02', value:'Port 02'},
{label:'Port 03', value:'Port 03'},
];

Answer 3

没有必要在下拉值中使用标签和值。您可以在p下拉列表中设置optionLabel属性。这意味着将从对象属性中读取值，方法与在optionLabel属性中设置的值相同，并在调用item.label或selectedItem.label时显示。

Answer 4

让 PrimeNG p-dropdown 处理字符串数组是可能的，尽管它没有很好的文档记录。我有时在选择时区时使用它。可能有更简洁的选项，但我使用 ng-template 来填充下拉列表并使用 onChange 来存储选定的字符串值：

HTML

<p-dropdown [style]="{'width':'150px'}" [options]="portNames" placeholder="Select a Port" (onChange)="storeValue($event)">
  <ng-template let-item pTemplate="selectedItem"> 
    {{item}} 
  </ng-template> 
  <ng-template let-item pTemplate="item"> 
    {{item}}
  </ng-template>
</p-dropdown>

Component.ts

portNames: string[] =["Port 01","Port 02", "Port 03"];    

selectedPort="";

storeValue(event) {
    console.log(event); //event.value will likely be undefined, check event.originalEvent
    this.selectedPort = event.originalEvent.srcElement.innerText;
}

PrimeNg p-dropdown不显示数组值

4 个答案: