angular5 - 如何设置 PrimeNG p-dropdown 的默认值

Question

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

问题

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

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

我的 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>

我的虚拟组件.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 });
        }
    }
});

Answer 1

如果 PrimeNG 不知道将“selectedCountry”绑定(bind)到哪个字段，则可能会导致这种情况。您的下拉控件的“国家/地区”模型具有更多键和值属性。

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

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

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

您可以阅读更多here .