21

我在我的 angular5 应用程序中使用 PrimeNG。我对 p-dropdown 有疑问

问题

我有用于显示国家/地区的 p 下拉菜单。我在那里正确绑定了选择选项，它工作正常（此数据来自 api），但我需要将此 p-dropdown 的默认选定选项设置为“印度”。

我将 ng-model 值设置为 India，但它不起作用。

我的 dummy.component.html 代码

<div class="form-group col-md-2">
    <div>
        <label for="inputEmail4"> Select Country</label>
        <span style="color:red">*</span>
    </div>
    <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder="select country"
            (onChange)="getStatebyCountry(applicant.country,$event)" #country="ngModel" required>
    </p-dropdown>
    <span *ngIf="country.invalid && (country.dirty || country.touched)">
        <span [hidden]="!country.hasError('required')" style="color:#ffa500">country is mandatory</span>
    </span>
</div>

我的 dummy.component.ts

export class dummyComponent implements OnInit {
    //variable declaration scope for all controller function
    applicant: any = {};

    country: string; constructor() { }

    ngOnInit() {
        this.applicant.country = 'India';
    } 
    this.countries = [];
    // this.countries.push({ label: 'Select Country', value: '' });
    //getallcountries
    this.UserService.getallcountries().subscribe(result => {
    console.log("countries" + result);
    this.cnt = result;
    for (let i = 0; i <= this.cnt.length; i++) {
        if (this.cnt[i].id === 1) {
            this.countries.push({ label: this.cnt[i].name, value: this.cnt[i].id });
        }
    }
});
4

13 回答 13

15

这可能是由于 PrimeNG 不知道将“selectedCountry”绑定到哪个字段，即。下拉控件的“国家”模型具有更多的键和值属性。

在我的情况下，我必须明确地“告诉”每个下拉字段值的属性是"value". 我为此使用了该p-dropdown dataKey属性。

因此，在我的下拉控件中，我添加了如下内容：

<p-dropdown dataKey="value" ></p-dropdown>

你可以在这里阅读更多。

于 2019-11-14T09:51:07.310 回答
7

尝试更换

this.applicant.country = 'India';

和

this.applicant = {country: 'India'};

编辑

p-dropdown从 API 获取数据后显示您的数据。

<div *ngIf="dataLoaded">
  <p-dropdown [options]="countries" [(ngModel)]="applicant.country"></p-dropdown>
</div>

见Plunker

于 2018-04-03T08:11:23.940 回答
5

您可以使用 ngModel 设置PrimeNG Dropdown的默认值，如下面的方法所示：


组件.html：

<p-dropdown [options]="cities" name="selectedCity" [(ngModel)]="selectedCity"></p-dropdown>


组件.ts：

selectedCity: string = 1; //Id value of the City to be selected


如果由于版本问题没有修复，试试这个：

this.cities.value = this.selectedCity;

希望这可以帮助...

于 2018-09-12T07:48:14.250 回答
2

更换解决方案，尝试使用：

[placeholder]="yourSelectedObject.Field"
于 2021-01-05T17:22:28.410 回答
1

我也遇到了这个问题，经过几分钟的调试，我发现这个问题的一些常见原因可能是：

1) 类型不匹配- 下拉列表可以绑定整数，[(ngModel)] 属性可以是字符串。

例如：

<p-dropdown [options]="countries" [(ngModel)]="selectedCountry"></p-dropdown>

在哪里

countries = [1,2,3]

和

selectedCountry = '1'

2) 大写 - 小写- 下拉列表可以绑定到小写字符串，并且 [(ngModel)] 属性可以是大写或两者的组合。

例如：

countries = ['United States', 'England', 'Bolivia']

和

selectedCountry = 'united states'

在这种情况下，它必须完全匹配才能按预期工作'United States'

于 2019-08-28T18:53:05.420 回答
1

我的解决方案是在设置表单字段（ngModel 或 formControl）之前将国家/地区加载到控制器中。还要保持相同类型的密钥。不要对表单控件使用数字，对列表使用字符串：

// first get the cities from the server
response.cities.forEach(city => {
                      this.dropdowns['cities'].push({ value: city.id, label: element.city }); });

// when setting the form
city_id: new FormControl(this.user.city_id)

在上面的代码中 this.user.city_id 和 city.id 具有相同的类型号

于 2018-11-23T09:49:54.597 回答
0

Angular 13 和 PrimeNg 13。

答案很简单：

<p-dropdown *ngIf="isReady" [options]="offices" [(ngModel)]="selectedOffice" optionLabel="name" ></p-dropdown>

Component.ts
this.selectedOffice = this.offices.find(o => o.id === id);
this.isReady = true;

诀窍是设置 this.isReady 布尔值，然后将 *ngIf 放在 p-dropdown 上。下拉菜单似乎没有响应代码方面的值变化，因此这会强制它不显示下拉菜单，直到您选择了哪个项目是当前值。

于 2022-02-02T01:08:05.743 回答
0

我只是有一个类似的问题。我用 html 属性“optionLabel”解决了这个问题。如果我们阅读 PrimeNG 文档，它会说：当使用任意对象而不是 SelectItems 作为选项时，选项的标签字段的名称。

官方文档

希望能帮助到你

于 2019-09-17T14:13:49.650 回答
0

PrimgNg 中的更新

在 Primeng 中为下拉菜单设置默认值时需要小心。

<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>

country应该是一个number非字符串。

如果它是一个字符串，您可以对其进行类型转换。

country: Number("1");
于 2019-04-26T12:31:56.260 回答
0

您的“selectedCountry”必须具有您的国家元素拥有的所有键

于 2021-06-09T23:23:26.400 回答
0

你也可以试试这个。假设您的下拉列表如下所示：

     <p-dropdown
      class="iteration-dropdown"
      [options]="cities"
      [(ngModel)]="selectedCity"
      name="selectedCity"
      (onChange)="loadIterationFeatures()"
     ></p-dropdown>

在 上ngOnInit，执行以下操作：

 this.selectedCity = this.select;
 this.cities = [{label: this.select, value: this.id}]

其中 select 和 id 应该是默认标签和值。

于 2021-08-17T04:05:48.353 回答
0 
<p-dropdown name="country"
    
    optionLabel="label"
    optionValue="value"

    [options]="countries"
    [(ngModel)]="applicant.country"
    placeholder="select country"
    (onChange)="getStatebyCountry(applicant.country,$event)"     
    #country="ngModel" required>
</p-dropdown>

只需指定名称 optionLabel 和 optionValue。

数据是{ label: this.cnt[i].name, value: this.cnt[i].id }

因此标签键的值将用于显示，值键的值将用于 ngModel。

于 2021-08-28T06:18:10.817 回答
0

我使用这个解决方案来解决这个问题

html:

<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>

ts：

    public country;
    public countries;
    ngOnInit() {
        this.applicant.country = 'India';
        this.getCountry().then(()=>{
          this.country = this.applicant.country
        })
    } 
    getCountry(){
      return new Promise( (resolve,reject) => {
        this.UserService.getallcountries().subscribe(result => {
          this.cnt.forEach(element => {
            this.countries.push({
              label: element.name,
              value: element.id
            });
          });
          resolve();
        }, error =>{
          reject();
        });
      })          
    }
    changeCountry(){
     this.country = this.applicant.country;
    }

它在primeng 6.1.3工作

于 2018-09-10T01:44:37.660 回答