Угловая 2 - установка значения по умолчанию в раскрывающемся списке, когда по умолчанию жестко закодировано

Question

У меня есть следующее выпадающее меню. Я хочу установить для всех пациентов значение по умолчанию.

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

Моя модель объявляется так:

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

Я установил practiceUsers таким образом:

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

Независимо от того, как я могу изменить его, я всегда просто получить пустой параметр в качестве по умолчанию. Я попытался добавить объект в массив this.practiceUsers после его загрузки, а затем установить значение модели. Я попытался установить значение модели с кавычками и без них, чтобы увидеть, изменилось ли число или строка. Все, что я стараюсь, по-прежнему приводит к тому, что по умолчанию используется пустой параметр.

In Angular 1 Я бы использовал ng-options, но это больше не доступно для Angular 2, и каждый пример, который я нахожу, показывает использование ngFor для выпадающих списков.

Answer 1

Атрибуты объектов чувствительны к регистру, в вашем объекте атрибут называется careProvider, но в вашем шаблоне вы используете searchModel.careprovider с нижним регистром p. Я думаю, вы также должны использовать директиву NgValue вместо value, потому что вы используете директиву NgModel. Таким образом, это должно работать:

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

Answer 2

Попробуйте использовать [выбранный] атрибут. Я решил подобную проблему таким образом:

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

Я надеюсь, что это помогает немного

Answer 3

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