Angular 8 下拉选择的选项没有显示，怎么会？

Question

这个问题经常被问到。我的情况显然与其他所有情况不同，因为我无法从现有答案中找到解决方案。

我有这个代码：

<form (ngSubmit)="getExceptions(f)" #f="ngForm">
          <div class="row">
            <div class="form-group col-xs-3 col-sm-3">
              <label class="col-form-label" for="aantal">Aantal meldingen per pagina?</label>
              <select name="selectedQuantity" id="aantal" class="form-control" ngModel>
                <option *ngFor="let option of options" [value]="option">{{option}}</option>

              </select>
            </div>
.
.
.
</form>

选项定义为：

private options: string[] = ['10', '20', '50'];

我想将“10”显示为默认选定值，但无论我做什么下拉菜单都会为选定值显示空白。单击下拉列表会显示值 10、20 和 30。因此它已正确填充。

我尝试了什么：

<option *ngFor="let option of options" [value]="option" [selected]="option==10">{{option}}
</option>

和

<option [value]="10" [selected]="true == true">10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

和

<option [value]="10" selected>10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

它与绑定有关，因为如果我从 select 标记中删除“ngModel”，它会显示我想用作默认值 (10) 的值。有点。我无法再读取选定的值，但显示的是默认值。

我从来没有用 plunkr 做过任何事情，但会尝试让一个例子在那里工作，然后在这里粘贴一个链接。

Answer 1

尝试这样设置ngModel：

.ts

  private options: string[] = ["10", "20", "50"];
  selectedQuantity = "10";

.html

<select name="selectedQuantity" id="aantal" class="form-control" [(ngModel)]="selectedQuantity">
    <option *ngFor="let option of options" [value]="option" >{{option}}</option>
</select>

工作演示

Answer 2

既然我们只想为我们的选择标签提供一个占位符，为什么不尝试不同的方法呢？

使用禁用属性以某种方式使角度忽略它。那么它就可以完美地用作占位符。

<select class="form-select" name="NAME" ngModel>
   <option value="" disabled selected>Select text</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>