如果用户未在多重过滤器搜索栏中为<select>选择任何选项，则如何[ngModel]绑定<select>中默认[selected] <option>的值

如何解决如果用户未在多重过滤器搜索栏中为<select>选择任何选项，则如何[ngModel]绑定<select>中默认[selected] <option>的值

问题在于，不必同时使用所有输入字段或选择标签进行过滤，因此有时用户可以留下一个或多个过滤器而无需为其选择或放置选项/输入。在那种情况下，我希望我的选择标签在提交查询时返回默认的[selected] =“ true”选项的值。

当我运行应用程序时，[selected] =“ true”选项会正确显示在下拉选择框中，但是每当我尝试提交并运行查询而不选择任何其他选项时，[selected] =“ true”选项的值没有抓取会影响整个查询，并且我必须为搜索栏中的每个标签选择/选择任何选项，即使其定义为[selected] =“ true”的选项也可以正确抓取并非闲置的值我正在尝试构建的过滤器搜索栏，而且绝对不友好。

我正在使用[（ngModel）]绑定输入字段或选择标签的选项，并且已经通过使用[value] =“”

设置了[selected] =“ true”选项的值

下面显示并说明案件的图片

这是我的简化html文件

<div class="input-group mb-3">

    <select class="" name="numbers-list" [(ngModel)]="number" >
          <option [selected]="true" [value]="defaultValue"> Any </option>
          <option value="1"> 1 </option>
          <option value="2"> 2 </option>
          <option value="3"> 3 </option>
    </select>

    <button(click)="searchNumber()"></button>

</div>

这是简化的component.ts文件

import { Component,OnInit } from '@angular/core';
import {NumberService} from '../../services/numbers.service';


export class ListingsListComponent implements OnInit {
  
  list: any:
  number: any;
  defaultValue: any;
 

constructor(private numberService: NumberService) {}


searchNumber(): void {
    this.defaultValue = "Any"
    this.numberService.findByNumber(this.number)
      .subscribe(
        data => {
          this.list = data;
          console.log(data);
        },error => {
          console.log(error);
        });
  }
}

这是简化的服务文件

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseUrl = 'http://localhost:3000/numbers';

@Injectable({
  providedIn: 'root'
})
export class NumberService {



constructor(private http: HttpClient) { }

    findByNumber(number): Observable<any> {
    return this.http.get(`${baseUrl}?number=${number}`);
  }

}

This image shows first when I run the app or refresh the browser it automatically shows the [selected] options

Second Image shows what happens when I press the button to submit the query without selecting any options for the select tags but only filling the Input field &

Third Image Shows that the query works & fetched the requested data only when I manually pressed and selected the options I want

因此，如果我选择了选项并且未将其保留为默认选项，那么查询和所有内容均正常运行，而我想要的是，如果用户未在标签之一中选择一个选项，则该选择标签应自动在提交时提供其默认选项值

解决方法

删除选项中的[selected] =“ true”。您应该根据变量this.number的值来控制所有内容，例如

this.numberService.findByNumber(this.number?this.number:this.defaultValue)

或者，如果可能的话，在声明变量号时

defaultValue="Any"
number: any=this.defaultValue