web-dev-qa-db-ja.com

PrimeNG p-dropdownのデフォルト値を設定する方法

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 });
        }
    }
 });
angular5primengprimeng-dropdowns
11
Bhagvat Lande

交換してみてください

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 を参照してください

4
Antikhippe

次のアプローチに示すように、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;

お役に立てれば...

2
Murat Yıldız

PrimgNgの更新

Primengでドロップダウンのデフォルト値を設定する際、少し注意する必要があります。

<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>

countryは文字列ではなくnumberでなければなりません。

文字列の場合は、型キャストできます。

country: Number("1");

それが役に立てば幸い。

0
Dheeraj Kumar

私の解決策は、フォームフィールド（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の型番号は同じです

0
makkasi

同様の問題が発生しました。これをhtml属性「optionLabel」で解決しました。 PrimeNGのドキュメントを読むと、次のように表示されます。SelectItemsの代わりに任意のオブジェクトがオプションとして使用される場合のオプションのラベルフィールドの名前。

公式ドキュメント

それが役に立てば幸い

0
Neamesis

私はこの解決策を使用してこれを修正します

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で動作します

0
chou

私もこの問題を抱えていて、数分デバッグした後、この問題の一般的な理由のいくつかは次のようになります。

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'

0
GustavoTM