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

问题描述

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

问题

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

我将 ng-model 值设置为 India，但没有用.

我的 dummy.component.html 代码

<div><label for="inputEmail4">选择国家</label><span style="color:red">*</span>
<p-下拉菜单名称=国家"[选项]=国家"[(ngModel)]=申请人.国家"占位符=选择国家"(onChange)="getStatebyCountry(applicant.country,$event)";#country=ngModel"需要></p-下拉菜单><span *ngIf="country.invalid &&(country.dirty || country.touched)"><span [hidden]="!country.hasError('required')";style="color:#ffa500">国家是强制性的</span></span>

我的 dummy.component.ts

export class dummyComponent 实现 OnInit {//所有控制器函数的变量声明范围申请人:任何={}；国家:字符串；构造函数(){}ngOnInit() {this.applicant.country = '印度';}this.countries = [];//this.countries.push({ label: 'Select Country', value: '' });//获取所有国家this.UserService.getallcountries().subscribe(result => {控制台日志(国家"+结果)；this.cnt = 结果；for (let i = 0; i <= this.cnt.length; i++) {如果 (this.cnt[i].id === 1) {this.countries.push({ label: this.cnt[i].name, value: this.cnt[i].id });}}});

解决方案

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

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

所以，在我的下拉控件中，我添加了如下内容:

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

您可以在此处阅读更多信息.

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

Question

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".

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

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>

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

解决方案

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.

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-dropdown 设置默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！