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>

选项定义为：私有选项：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

尝试这样：

。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 [value]="10" ngModel>
 ...

Answer 3

使用方式如下

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

您必须使用select作为属性绑定。

让我知道是否有帮助