web-dev-qa-db-fra.com

Comment définir la valeur par défaut pour PrimeNG p-dropdown

J'utilise PrimeNG dans mon application angular5. J'ai un problème avec p-dropdown

Question

J'ai p-dropdown pour montrer les pays. Je lie les options de sélection correctement. Cela fonctionne bien (ces données proviennent de l'API), mais je dois définir l'option sélectionnée par défaut pour cette liste déroulante en tant que "Inde".

J'ai défini la valeur de ng-model en tant qu'Inde, mais cela n'a pas fonctionné.

mon code factice.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>

mon mannequin.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
5
Bhagvat Lande

Essayez de remplacer 

this.applicant.country = 'India';

avec 

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

Modifier

Affichez votre p-dropdown une fois que vous avez obtenu les données de votre API.

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

Voir Plunker

2
Antikhippe

Ma solution était de charger les pays dans le contrôleur avant de définir le champ de formulaire (ngModel ou formControl). Gardez également le même type de clé. N'utilisez pas le numéro pour le contrôle de formulaire et la chaîne pour la liste:

// 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)

Dans le code ci-dessus, this.user.city_id et city.id ont le même numéro de type

0
makkasi

J'utilise cette solution pour résoudre ce problème 

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;
    }

ça marche chez primeng 6.1.3

0
chou

Vous pouvez définir la valeur par défaut de PrimeNG Dropdown à l'aide de ngModel comme indiqué dans l'approche suivante:


composant.html:

<p-dropdown [options]="cities" name="selectedCity" [(ngModel)]="selectedCity"></p-dropdown>


composant.ts:

selectedCity: string = 1; //Id value of the City to be selected


S'il n'est pas corrigé à cause de problèmes de version, essayez ceci:

this.cities.value = this.selectedCity;

J'espère que cela t'aides...

0
Murat Yıldız