如何为PrimeNG p下拉菜单设置默认值 [英] How to set default value for PrimeNG p-dropdown

问题描述

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

I am using PrimeNG in my angular5 app. I have issue with p-dropdown

问题

我有用于显示国家/地区的p-下拉菜单.我正确绑定了选择选项，在这里工作正常(此数据来自api)，但是我需要将此p下拉列表的默认选择选项设置为印度".

I have p-dropdown for showing countries. I bind the select options correctly there it works fine (this data coming from api), but I need to set default selected option for this p-dropdown as "India".

我将ng-model的值设置为印度，但这没有用.

I set up ng-model value as India but it didn't work.

我的dummy.component.html代码

my dummy.component.html code

<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

my 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 });
        }
    }
 });

推荐答案

如果PrimeNG不知道将"selectedCountry"绑定到哪个字段，则可能导致这种情况.您用于下拉控件的国家"模型具有更多的键和值属性.

This may be caused if PrimeNG doesn't know to which field to bind the "selectedCountry", ie. your "countries" model for the dropdown control has more then key and value properties.

就我而言，我必须明确地告知"每个下拉字段值的属性为"value".我为此使用了p-dropdown dataKey属性.

In my case, I had to explicitly "tell" to each dropdown field that the property for values is "value". I used the p-dropdown dataKey property for this.

因此，在下拉控件中，我添加了以下内容:

So, in my dropdown control, I added something like this:

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

您可以在此处了解更多信息.

You can read more here.

这篇关于如何为PrimeNG p下拉菜单设置默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！