Angular5アプリでPrimeNGを使用しています。 p-dropdownに問題がある
質問
国を表示するためのpドロップダウンがあります。ここで選択オプションを正しくバインドします(このデータは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>
私の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>
Plunker を参照してください
次のアプローチに示すように、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;
お役に立てれば...
PrimgNgの更新
Primengでドロップダウンのデフォルト値を設定する際、少し注意する必要があります。
<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>
country
は文字列ではなくnumber
でなければなりません。
文字列の場合は、型キャストできます。
country: Number("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の型番号は同じです
同様の問題が発生しました。これをhtml属性「optionLabel」で解決しました。 PrimeNGのドキュメントを読むと、次のように表示されます。SelectItemsの代わりに任意のオブジェクトがオプションとして使用される場合のオプションのラベルフィールドの名前。
それが役に立てば幸い
私はこの解決策を使用してこれを修正します
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で動作します
私もこの問題を抱えていて、数分デバッグした後、この問題の一般的な理由のいくつかは次のようになります。
1)型の不一致-ドロップダウンは整数にバインドでき、[(ngModel)]プロパティは文字列にできます。
例えば:
<p-dropdown [options]="countries" [(ngModel)]="selectedCountry"></p-dropdown>
どこ
countries = [1,2,3]
そして
selectedCountry = '1'
2)Uppercase- Lower-Case-ドロップダウンは小文字の文字列にバインドでき、[(ngModel)]プロパティは大文字または両方の組み合わせにすることができます。
例えば:
countries = ['United States', 'England', 'Bolivia']
そして
selectedCountry = 'united states'
期待どおりに機能するには、完全に一致する必要があります。この場合は'United States'