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>

它与绑定(bind)有关，因为如果我从选择标记中删除“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>

<强> Working Demo