Question

我的应用程序中有几个下拉字段。我正在使用ngModel来绑定值。这是我的演示plnkr

令人惊讶的From和To下拉列表工作正常。但我无法从Group获得价值并且排序下降。但是当我调用clearFilter（）

时，我可以将值设置为Group并对下拉列表进行排序

我知道我在某个地方出了问题，但无法理解。

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

无法使用ngModel获取下拉值

1 个答案: