0
私のアプリケーションにはいくつかのドロップダウンフィールドがあります。そして、私は値をバインドするためにngModelを使用しています。ここに私のデモですplnkrngModelを使用してドロップダウン値を取得できません
驚くべきことに、ドロップダウンはうまく動作します。しかし、私はグループと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();
}
}