web-dev-qa-db-ja.com

Angular 8ドロップダウンで選択したオプションが表示されない、どうしてですか？

この質問は頻繁に尋ねられました。既存の回答から解決策を見つけることができないため、私の状況は明らかに他のすべての状況とは異なります。

私はこのコードを持っています：

<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で何もしたことがありませんが、そこで動作する例を取得してから、そのリンクをここに貼り付けます。

angulartypescriptdrop-down-menuhtml-select
2
Werner van Mook

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>

ワーキングデモ

3
Adrita Sharma

選択に値を割り当てるだけ

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

以下のように使用します

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

プロパティバインディングとしてselectを使用する必要があります。

それが役立つかどうか教えてください

1
siddharth shah

NgModelを使用して、次のように割り当てられた1つの変数のデフォルト値で選択できます-


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

値は次のようになります-selectedOption：string = '10';

1
Milind

このようにしてみてください[ngModel]="10"

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

デモ????

0
albarmavi