Блог

Главная - Вопросы по программированию - Выпадающий список Angular typescript не выбирает значение по умолчанию

Выпадающий список Angular typescript не выбирает значение по умолчанию

#html #angular #select

#HTML #angular #выберите

Вопрос:

У меня возникла некоторая проблема при попытке установить выбранное значение по умолчанию для выпадающего списка с помощью Angular typescript.
Вот мой код в html:

  <div class="row">
            <div class="form-group col-md-2">
                <strong><label class="form-control-label" 
                jhiTranslate="staff.department" 
                for="field_department">Department</label></strong>
            </div>
            <div class="form-group col-md-4">
                <select class="form-control" id="field_department" 
                name="department" [(ngModel)]="staff.department">
                    <option [ngValue]="null" selected disabled>
                     Please select an Option</option>
                    <option [ngValue]="departmentOption.id === staff.department?.id ? 
                    staff.department : departmentOption" 
                 *ngFor="let departmentOption of departments | orderBy: 'departmentName'">
                   {{departmentOption.departmentName}}</option>
                </select>
            </div>
        </div>

Когда я запускаю страницу, по умолчанию в выпадающем списке должна отображаться опция для "Please select an Option" , однако в моем случае она пуста. Есть идеи, почему это так?

Спасибо!

Ответ №1:

Вы можете попробовать установить staff.department=null изначально

в ts

 ngOnInit() {
 this.staff.department=null
}

в html

 <select class="form-control" id="field_department" name="department" [(ngModel)]="staff.department">
     <option [ngValue]=null disabled>Please select an Option</option>
        //rest code
</select>

Комментарии:

1. используя ngInit в <выбрать> или?

2. да, в ngOnInit. Также удалите выбранное из <опция [ngValue]=»null» выбрано отключено>, пожалуйста, выберите опцию</option>

3. Но тогда я хочу, чтобы это отображалось по умолчанию при запуске страницы

4. Если вы изначально задали staff.department как null, то при загрузке ваш параметр null будет установлен автоматически

5. Могу ли я уточнить у вас, допустим, я установил для него значение «в этом случае также будет работать»?

Ответ №2:

попробуйте <option [ngValue]="undefined" selected disabled>Please select an Option</option>

Ответ №3:

Попробуйте указать "anyvariable that is not defined in typescript" значение по умолчанию для параметра

 <select class="form-control" id="field_department" name="department"
 [(ngModel)]="staff.department">
             <option [ngValue]="anythingNotDefinedYet" selected disabled>
             Please select an Option</option>
             <option [ngValue]="departmentOption.id === 
             staff.department?.id ? staff.department : departmentOption" 
             *ngFor="let departmentOption of departments | orderBy: 'departmentName'">
             {{departmentOption.departmentName}}</option>
  </select>

Демонстрация Stackblitz, демонстрирующая случай