javascript - 从 <select> 标签返回一个数字

Question

我正在尝试获取选择标记中的选项以数字而不是字符串形式返回。这是我的 html:

 <form  #fSearchPropertiesByBedrooms (submit)="searchPropertiesByBedrooms(bathrooms)">
         <select type="number" name="bathrooms" [(ngModel)]="bathrooms">
           <option value="1">1</option>
           <option type="number" value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
         </select>
         <button type="submit" class="button button-primary button-xs button-green" (click)="removeSearch()">Submit</button>
       </form>

我认为将 type 设置为 number 可以解决问题，但事实并非如此!我正在使用的功能是:

  searchPropertiesByBedrooms(bathrooms: number) {
    console.log('bathrooms:', bathrooms);
    this.properties = this._propertyManage.searchPropertiesByBedrooms(bathrooms).valueChanges();
  }

但是，当我使用它作为输入字段时，它确实将其返回为数字，但由于某种原因，使用选择标记它会将其返回为字符串。

Answer 1

创建一个数字数组并使用ngFor循环它。然后使用[ngValue]分配值。

<select type="number" name="bathrooms" [(ngModel)]="bathrooms">
           <option *ngFor="let item of items" [ngValue]="item"  > {{item}}</option> 
 </select>

items: number[] = [1,2,3,4]