ngModelを使用してドロップダウン値を取得できません

Question

私のアプリケーションにはいくつかのドロップダウンフィールドがあります。そして、私は値をバインドするためにngModelを使用しています。ここに私のデモですplnkr

驚くべきことに、ドロップダウンはうまく動作します。しかし、私はグループとsortbyドロップダウンから価値を得ることができませんでした。しかし、私はclearFilter（）を呼び出すと、値をグループ化してドロップダウンをソートすることができます。

私はどこかに間違っていたが、それを理解できなかったことを知っている。

component.html

<div class="modal-body"> 
       <div > 
       <div >Sort by</div> 
       <div > 
        <select [(ngModel)]='select_sortby'> 
        <option [ngValue]='relevant' [selected]='select_sortby_default===null'>Most Relevant</option> 
        <option [ngValue]='recent'>Most Recent</option> 
        <option [ngValue]='ascending'>Ascending</option> 
        <option [ngValue]='dscending'>Descending</option> 
        </select> 
       </div> 
       </div> 
       <div > 
       <div >Main Group</div> 
       <div > 
        <select [(ngModel)]='select_group'> 
         <option [ngValue]='' disabled [selected]='select_group_default===null'>Select Main Group</option> 
         <option [ngValue]='group1'>Group1</option> 
         <option [ngValue]='group2'>Group2</option> 
         <option [ngValue]='group3'>Group3</option> 
        </select> 
       </div> 
       </div> 
       <div > 
       <div >Series</div> 
       <div > 
        <input [(ngModel)]='series' type="input" placeholder="Enter Series"> 
       </div> 
       </div> 
       <div > 
       <div >Year Published</div> 
       <div > 
        <div > 
        <div class="col-lg-3 "> 
         From 
        </div> 
        <div class="col-lg-7 "> 
         <select [(ngModel)]='select_from_year'> 
         <option [ngValue]='' disabled [selected]='select_from_year_default===null'></option> 
         <option [ngValue]='1992'>1992</option> 
         <option [ngValue]='1993'>1993</option> 
         <option [ngValue]='1994'>1994</option> 
         </select> 
        </div> 

        </div> 
        <div style="margin-top:10px"> 
        <div class="col-lg-3 "> 
         To 
        </div> 
        <div class="col-lg-7 "> 
         <select [(ngModel)]='select_to_year'> 
          <option [ngValue]='' disabled [selected]='select_to_year_default===null'></option> 
          <option [ngValue]='2010'>2010</option> 
          <option [ngValue]='2011'>2011</option> 
          <option [ngValue]='2012'>2012</option> 
         </select> 
        </div> 

        </div> 
       </div> 
       </div> 
      </div> 
      <div class="modal-footer" style="border: 0px solid white;"> 
       <div > 
       <div class="col-lg-6"> 
        <button type="button" class="bmw-xs-results-btn-clear-filter" (click)='clearFilter()'>Clear Filter</button> 
       </div> 
       <div class="col-lg-6"> 
        <button type="button" class=" bmw-xs-results-btn-apply-filter" (click)='applyFilter()'>Apply Filter</button> 
       </div> 
       </div> 
      </div> 

component.ts

export class App { 
     name:string; 
     constructor() { 

     } 
     public select_sortby: string; 
     public select_sortby_default = ''; 
     public select_to_year: string; 
     public select_to_year_default = ''; 
     public select_from_year: string; 
     public select_from_year_default = ''; 
     public select_group: string; 
     public select_group_default = ''; 
     public series: string; 
     applyFilter() { 
     console.log(this.select_sortby); 
     console.log(this.select_group); 
     console.log(this.series); 
     console.log(this.select_from_year); 
     console.log(this.select_to_year); 
     } 
     clearFilter() { 
     this.select_sortby_default = null; 
     this.select_from_year_default = null; 
     this.select_to_year_default = null; 
     this.select_group_default = null; 
     this.series = ''; 
//debug statement 
     this.applyFilter(); 
     } 
    } 

Answer 1

それは非常に簡単です、あなたの問題の解決策。 "[ngValue]"を "value"に変更してください。