角度打字稿下拉列表未选择默认值

Question

尝试使用 Angular 打字稿设置下拉列表的默认选定值时遇到了一些问题。
这是我的 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"的下拉选项应该显示在下拉列表中，但是，就我而言，它是空的。知道为什么会这样吗？

谢谢！

Answer 1

您可以尝试最初设置staff.department=null

在 TS 中

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

在网页中

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

Answer 2

尝试<option [ngValue]="undefined" selected disabled>Please select an Option</option>

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

堆栈闪电战演示显示案例