web-dev-qa-db-fra.com

Angular 2 - définition de la valeur par défaut dans la liste déroulante lorsque la valeur par défaut est codée en dur

J'ai la liste déroulante suivante. Je veux définir Tous les patients comme valeur par défaut.

    <select [(ngModel)]="searchModel.careprovider">
      <option [value]="0">All Pateints</option>
      <option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
        {{user.dn}}
      </option>
    </select>

Mon modèle est déclaré de cette façon:

searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };

Je règle les utilisateurs de cette manière:

  this._practice.getUsers(this.searchModel.practice).subscribe(result => {
    this.practiceUsers = result;
    this.searchModel.careProvider = 0;
  });

Peu importe comment je le modifie, je reçois toujours une option vide par défaut. J'ai essayé d'ajouter un objet au tableau this.practiceUsers après son chargement, puis de définir la valeur du modèle. J'ai essayé de définir la valeur du modèle avec et sans guillemets pour voir si un nombre ou une chaîne faisait une différence. Tout ce que j'essaie entraîne toujours l'option par défaut comme option vide.

Dans Angular 1, j'aurais utilisé ng-options, mais ce n'est plus disponible pour Angular 2, et chaque exemple que je trouve montre l'utilisation de la ngFor pour les menus déroulants.

javascriptangulartypescriptngforangular2-ngmodel
3
Jhorra

Les attributs d'objet sont sensibles à la casse. Dans votre objet, l'attribut s'appelle careProvider, mais dans votre modèle, vous utilisez searchModel.careprovider avec minuscule p. Je pense que vous devez également utiliser la directive NgValue au lieu de value car vous utilisez la directive NgModel. Donc, ça devrait marcher: ça ne marche pas

<select [(ngModel)]="searchModel.careProvider">
  <option [ngValue]="0">All Pateints</option>
  <option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
    {{user.dn}}
  </option>
</select>
3
Stefan Svrkota

Essayez d'utiliser l'attribut [selected]. J'ai résolu le même problème de cette façon: 

<select>
   <option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
      {{option.name}}
   </option>
</select>

J'espère que cela aide un peu

1
Jaroslaw K.
<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
    <option [ngValue]="null">Select</option>
    <option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>
0
Michalis