Как установить значение по умолчанию для PrimeNG p-dropdown

Я использую PrimeNG в моем приложении angular5. У меня проблема с р-выпадающим

Вопрос

У меня есть 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 });
        }
    }
 });

Ответ 1

Попробуйте заменить

this.applicant.country = 'India';

this.applicant = {country: 'India'};

редактировать

Отобразите свой p-dropdown список, как только вы получите данные из вашего API.

<div *ngIf="dataLoaded">
  <p-dropdown [options]="countries" [(ngModel)]="applicant.country"></p-dropdown>
</div>

Посмотреть Plunker

Ответ 2

Вы можете установить значение по умолчанию для PrimeNG Dropdown, используя ngModel, как показано на следующем подходе:

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;

Надеюсь это поможет...

Ответ 3

Я использую это решение, чтобы исправить это

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

Ответ 4

Моим решением было загрузить страны в контроллер перед настройкой поля формы (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 имеют одинаковый номер типа

Ответ 5

Обновление в PrimgNg

При установке значения по умолчанию для выпадающего меню в Primeng нужно быть немного осторожнее.

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

country должна быть number не строкой.

Вы можете ввести его, если это строка.

country: Number("1");

Надеюсь, поможет.

Ответ 6

У меня тоже была эта проблема, и после нескольких минут отладки я обнаружил, что некоторые из распространенных причин этой проблемы могут быть:

1) Несоответствие типов - раскрывающийся список может быть привязан к целым числам, а свойство [(ngModel)] может быть строкой.

Например:

<p-dropdown [options]="countries" [(ngModel)]="selectedCountry"></p-dropdown>

Где

countries = [1,2,3]

selectedCountry = '1'

2) Uppercase- в нижнем регистре - раскрывающийся список может быть привязан к строке в нижнем регистре, а свойство [(ngModel)] может быть в верхнем регистре или их комбинации.

Например:

countries = ['United States', 'England', 'Bolivia']

selectedCountry = 'united states'

В этом случае должно быть точное совпадение, чтобы работать как положено 'United States'

Ответ 7

У меня просто была похожая проблема. Я решил это с помощью атрибута html "optionLabel". Если мы читаем документацию PrimeNG, она говорит следующее: Имя поля метки опции, когда в качестве опций используются произвольные объекты вместо SelectItems.

Официальная документация

Надеюсь, это поможет