时间戳

首页 > 解决方案 > 如何[(ngModel)]绑定默认值[已选]

javascript - 如何[(ngModel)]绑定默认值[已选]

问题描述

问题在于，没有必要同时使用所有输入字段或选择标签进行过滤，因此有时用户可以留下一个或多个过滤器而不为他们选择或放置选项/输入。在这种情况下，我希望我的选择标签在提交查询时返回默认 [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}`);
  }

}

当我运行应用程序或刷新浏览器时，此图像首先显示它会自动显示 [selected] 选项

第二张图片显示了当我按下按钮提交查询而不为选择标签选择任何选项而只填写输入字段时会发生什么 &

第三张图片显示查询有效并仅在我手动按下并选择我想要的选项时才获取请求的数据

因此，如果我选择选项并且没有将它们留给默认选项，那么查询和每件事都可以正常工作，我想要的是如果用户没有在其中一个标签中选择一个选项，这个选择标签应该自动提供它的默认值提交时的选项值

标签： javascriptangularangularjs-directivemean-stackangularjs-ng-model

解决方案

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

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

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

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

推荐阅读