プルダウンで選択された値をタイプスクリプトanglejs

Question

私は自分のhtmlにドロップダウンと適用ボタンを持っています。私のtsファイルでは、apply（）関数と配列が宣言されています。フロントエンドにドロップダウンを表示することはできますが、適用ボタンをクリックすると、ドロップダウンから選択した値を取得しません。私は選択された値を表示するために今のところラットボックスを使用します。 TSに

<div class="form-group"> 
       <label for="inputdefault" class="control-label col-sm-2">Portal:</label> 
       <div class="col-sm-10"> 

        <select class="form-control" id="inputdefault" name = "portal"> 
         <option *ngFor="let c of portalValues">{{c.group}}</option> 
        </select> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
        <button type="button" class="btn btn-primary" (click)="apply(portal)">Apply</button>      
        <button type="reset" class="btn btn-default" (click)="cancel()">Clear</button> 
       </div> 
      </div> 

、

portalValues: Array<Object> = [{id:1, group:'Enterprise'},{id:2, group:'Business'}]; 

apply(portal:any) { 
    alert(portal); 
    } 

、アラート値が未定義として表示されます。ドロップダウンから選択した値を取得する方法。

Answer 1

あなたが渡しているportal引数が定義されていないためです。これを行うには複数の方法があります。 1つは単にTemplate Reference Variableを宣言することです。例えば

：

<select class="form-control" id="inputdefault" name = "portal" #portalSelect> 
    <option [value]="c.group" *ngFor="let c of portalValues">{{c.group}}</option> 
</select> 

二つのものがここに起こった：私はそれを参照できるように

1. 私はselect要素に#portalSelectを追加しました。
2. 私は、オプション要素に結合[value]属性を追加し、groupプロパティにバインド（あなたが合うものにこれをバインドすることができますが、オブジェクト自体にバインドしたい場合は、代わりに[ngValue]を使用する必要があります）

次に、選択したポータルをコンポーネント関数に渡すと、apply(portalSelect.value)を使用できます。

フォームサポートが必要な場合、または選択内容をコンポーネントにバインドする場合は、[(ngModel)]を使用します。この場合、あなたが選択した値のためにあなたのコンポーネントにプロパティを提供し、そのようににバインドしたい：

<select [(ngModel)]="selectedPortal"> 
... 

およびコンポーネントで

selectedPortal: any; 

apply() { 
    // do something with this.selectedPortal 
} 

Answer 2

select入力にngModelを含める必要があります。このような何かがそれを行う必要があります。このようにして、変数portalは、ドロップダウンで選択された値にバインドされます。 name属性はこれを行いません。

<select class="form-control" id="inputdefault" [(ngModel)]="portal" name = "portal"> 
    <option *ngFor="let c of portalValues">{{c.group}} </option> 
</select> 

また、あなたのselectタグでこれを含める必要があります。 #name="ngModel"