#javascript #angular #angularjs-directive #mean-stack #angularjs-ng-model
#javascript #угловой #angularjs-директива #средний стек #angularjs-ng-model
Вопрос:
проблема в том, что необязательно, чтобы все поля ввода или теги выбора использовались одновременно для фильтрации, поэтому иногда пользователи могут оставить один или несколько фильтров без выбора или размещения опции / ввода для них. и в этом случае я хочу, чтобы мои теги 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}`);
}
}
итак, запрос и все работает правильно, если я выбираю параметры и не оставляю их для параметров по умолчанию, и я хочу, чтобы, если пользователь не выбрал опцию в одном из тегов, этот тег выбора должен автоматически предоставлять значение параметров по умолчанию при отправке
Ответ №1:
удалите [selected]=»true» в опции. Вы должны контролировать все на основе значения вашей переменной this.number
, чтобы вы могли, например
this.numberService.findByNumber(this.number?this.number:this.defaultValue)
Или, если возможно, при объявлении переменной number
defaultValue="Any"
number: any=this.defaultValue
Комментарии:
1. Спасибо, Элизео, я попробовал ‘ number: any; ‘
ngOnInit(): void { this.number = "Any"}
, а затем установил [значение] желаемой опции в number ` <option [value]=»number»>1 </option>, и это сработало для меня спасибо за вашу поддержку, это действительно ценится