Блог

проблема в том, что необязательно, чтобы все поля ввода или теги выбора использовались одновременно для фильтрации, поэтому иногда пользователи могут оставить один или несколько фильтров без выбора или размещения опции / ввода для них. и в этом случае я хочу, чтобы мои теги select возвращали значение параметра default [selected]=»true» при отправке запроса.

Когда я запускаю приложение, параметр [selected]=»true» отображается правильно в раскрывающемся списке выбора, но всякий раз, когда я пытаюсь отправить и выполнить запрос без выбора какой-либо другой опции, значение параметра [selected]=»true» не фиксируется, что влияет на весь запрос, и у меня естьвыбрать / выбрать любой из параметров для каждого тега в строке поиска, даже если он определен как [selected]=»true», чтобы правильно получить значение, которое не используется для панели поиска фильтра, которую я пытаюсь создать, и определенно не удобно для пользователя.

Я использую [(ngModel)] для привязки полей ввода или выбора параметров тега и уже установил значение параметра [selected]=»true», используя [value]=»»

Ниже приведены изображения, показывающие и объясняющие случай

и вот мой упрощенный 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}`);
  }

}

  

Это изображение отображается первым, когда я запускаю приложение или обновляю браузер, оно автоматически отображает [выбранные] параметры

Второе изображение показывает, что происходит, когда я нажимаю кнопку для отправки запроса, не выбирая никаких параметров для выбранных тегов, а только заполняя поле ввода amp;

Третье изображение показывает, что запрос работает и извлекает запрошенные данные только тогда, когда я вручную нажал и выбрал нужные параметры

итак, запрос и все работает правильно, если я выбираю параметры и не оставляю их для параметров по умолчанию, и я хочу, чтобы, если пользователь не выбрал опцию в одном из тегов, этот тег выбора должен автоматически предоставлять значение параметров по умолчанию при отправке

удалите [selected]=»true» в опции. Вы должны контролировать все на основе значения вашей переменной this.number , чтобы вы могли, например

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

Или, если возможно, при объявлении переменной number

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