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”显示为默认的 selected 值，但无论我做什么，下拉列表都会显示 selected 值的空白。单击下拉列表显示值 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) 的值。有点。我无法再读取 selected 值，但显示的是默认值。

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

Answer 1

只需为 select

赋值

 <select [value]="10" ngModel>
 ...

Answer 2

像下面这样使用

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

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

如果有帮助请告诉我

Answer 3

尝试像这样设置 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

Answer 4

这样试试[ngModel]="10"

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

demo

Answer 5

您可以将 ngModel 用于 select，并在分配给它的一个变量中使用默认值作为 -


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

并且值将是 - selectedOption: string = '10';

Answer 6

如果您正在进行模型绑定，只需选择与您的模型类似的选项：

    export class MyModel
    {
       public field1: number = 0;
    }

    <select [(ngModel)]="myModel.field1">
      <option value="" > your value 1 < /option >
      <option value="">your value 2</option>
    </select>

所以诀窍是您需要在模型中设置默认值，该默认值在上述模型的 field1 中设置为零，并将 value1 设置为选定选项

Answer 7

我遇到了这个问题，因为 name 和 [(ngModel)] 值之间存在差异。

这是工作代码：

<select id="nodeKpiDataType" name="nodeKpi.dataType" [(ngModel)]="nodeKpi.dataType">
  <option *ngFor="let kpiType of kpyDataTypes" [value]="kpiType">{{ kpiType }}</option>
</select>

Answer 8

我遇到了同样的问题，默认选择的值没有以 angular 反应形式显示，但在实施属性绑定问题后得到解决。希望这会对某人有所帮助。

<option [ngValue]="null" [selected]="true">Select Account Type</option>

Answer 9

既然我们只想为我们的 select 标签添加一个占位符，为什么不试试不同的方法呢。

以某种方式使用禁用属性会使 angular 忽略它。然后完美地用作占位符。

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

Angular 8 下拉选中的选项不显示，怎么回事？

Angular 8 drop down selected option not showing, how come?

html-select

drop-down-menu

typescript

angular