处理两个下拉 select 选项

Question

我有两个基于此的下拉列表，我正在进行 REST 调用和获取数据。如果用户 select "ALL" 在其中任何一个中，我将显示所有数据，但是当用户选择 diff 选项时，它将根据提供的选项获取数据。我正在使用以下调用 html & ts 文件：

test.component.html:

<select (change)="selectHandler($event)">
     <option value="ALL">ALL</option>
     <option value="M1">M1</option>
</select>

<select (change)="selectHandler($event)">
      <option value="ALL">ALL</option>
      <option value="G1">G1</option>

………… 后来我循环获取如下值：

 <tr *ngFor="let testcase of selectedGrpMod">
  ....

test.component.ts:

selectHandler(moduleEvent: any, groupEvent: any) {
    if (moduleEvent.target.value == "ALL" || moduleEvent.target.value == "ALL") {
  this.dataService.getTest().then(res => {this.selectedGrpMod = res;})
   }
   else {
       this.dataService.getTesByParam(groupEvent.target.value, moduleEvent.target.value).then(res => {this.selectedGrpMod = res;})
    }
 }

问题是我无法同时处理两个下拉列表，它没有选择正确的数据，也许我使用的是通用的 selectHandler(..) 并且能够一个一个地访问下拉列表，所以它没有选择其他下拉菜单的下拉值 n 反之亦然，需要 help/pointers 对此 situation.Basically 使用正确的逻辑，如果我 select 来自第一个下拉菜单的 M1 和来自第二个下拉菜单的 G1，那么我必须将 M1 和 G1 都发送到我的 ts 文件，以便我可以根据这两个值进行 API 调用..

Answer 1

您想根据两个列表显示数据

点击显示数据之类的按钮，调用 UI

或

点击第二个列表的选项调用API

如何在两个下拉列表的组件中获取值 1. ViewChild 或 JavaScript

<select>
       <option *ngFor="let option of optionList" 
    value="ALL"  #optionIst>{{option.name}}   
       </option>      
    </select>

     <select>
       <option *ngFor="let option of optionList" 
    value="ALL"  #optionSec>{{option.name}}   
       </option>      
    </select>
<button (click)="showData()">Show Data </button>

Component.ts

@ViewChild('optionIst')
optionIst: ElementRef;
@ViewChild('optionSec')
optionSec: ElementRef;


    showData()
    {
     const value1 = this.optionIst.nativeElement.value;
     const value1 = this.optionSec.nativeElement.value;
   //Access both elements here by DOM properties
    }

将两个选项标签与 ngModel 绑定

<select>
   <option *ngFor="let option of optionList" value="{{option.name}}" [(ngModel)]="optionIst"> {{option.name}}   
       </option>

与第二个选项类似，并在单击按钮时调用 API。

Answer 2

@Anad，不要使用DOM，使用templateDriven form，或者Reactive Form 或者User input https://angular.io/guide/user-input

最简单，使用用户输入，我会使用两个输入，改为使用两个下拉列表

@Component({
  selector: 'app-myapp',
  template: `
    <--!see, we write #box1 and #box2, so
       we can use box1.value and box2.value in our function -->
    <input #box1 (change)="update(box1.value,box2.value)">
    <input #box2 (change)="update(box1.value,box2.value)">
  `
})
export class myComponent {
  update(value1: string,value2:string) {
    console.log(value1,value2);
  }
}

处理两个下拉 select 选项

Handling two dropdown select options

drop-down-menu

angular

angular5