p-dropdown未正确显示标签

Question

我无法让下拉组件发挥作用。下拉列表似乎检测到它应显示的项目，因为它根据数组中的项目数扩大了项目列表。但是这些空格都是空白的。

这是与https://www.primefaces.org/primeng/#/dropdown示例相同的下拉框（第一个标题为'simple'）

但是对我来说它没有任何显示。我复制粘贴完全相同的代码，唯一的区别是导入。当我去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：当任意对象而不是SelectItems用作选项时，选项的标签字段的名称。

Answer 2

使用json数组中的键名添加optionLabel。您想要表示为标签的键。

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

Answer 3

尝试一下：

<div>
  <form  [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Card Type</label>
      <select formControlName="cardType" class="form-control">
        <option [value]="item" *ngFor="let item of creditCardTypes">{{item}}</option>
      </select>
      <small class="form-text text-muted">Based on selection of card type conditional validation is applied<br/></small>
     <small class="form-text text-danger" *ngIf="userFormGroup.controls.cardType.errors">{{userFormGroup.controls.cardType.errors.creditCard.message}}<br/></small> 
    </div>
    <div class="form-group">
      <label>Credit Card No.</label>
      <input type="text" formControlName="creditCardNumber" class="form-control"  />
      <small class="form-text text-muted">Enter Selected Card's Card No<br/></small>
    <small class="form-text text-danger" *ngIf="userFormGroup.controls.creditCardNumber.errors">{{userFormGroup.controls.creditCardNumber.errors.creditCard.message}}<br/></small>
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

请注意：<p-dropdown [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="value.name" [showClear]="true"> </p-dropdown>