我在angular5应用程序中使用PrimeNG。我有p-dropdown的问题
题
我有显示国家的p-down。我正确绑定选择选项,它工作正常(此数据来自api),但我需要为此p-dropdown设置默认选择选项为“India”。
我将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>
我的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.applicant.country = 'India';
同
this.applicant = {country: 'India'};
编辑
从API获取数据后显示p-dropdown
。
<div *ngIf="dataLoaded">
<p-dropdown [options]="countries" [(ngModel)]="applicant.country"></p-dropdown>
</div>
您可以使用ngModel设置PrimeNG Dropdown的默认值,如以下方法所示:
component.html:
<p-dropdown [options]="cities" name="selectedCity" [(ngModel)]="selectedCity"></p-dropdown>
component.ts:
selectedCity: string = 1; //Id value of the City to be selected
如果由于版本问题而未修复,请尝试以下操作:
this.cities.value = this.selectedCity;
希望这可以帮助...
我使用此解决方案来解决此问题
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
我的解决方案是在设置表单字段(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具有相同的类型编号
PrimgNg更新
虽然在Primeng中设置下拉列表的默认值需要小心。
<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>
country
应该是number
而不是字符串。
如果它是一个字符串,你可以对其进行类型转换。
country: Number("1");
希望能帮助到你。