处理两个下拉选择选项答案

【问题标题】：Handling two dropdown select options处理两个下拉选择选项
【发布时间】：2018-01-27 11:12:30
【问题描述】：

我有两个基于此的下拉菜单，我正在调用 REST 并获取数据。如果用户在其中任何一个中选择“全部”，我将显示所有数据，但是当用户选择差异选项时，它将根据提供的选项获取数据。我正在使用以下对 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(..) 并且能够一一访问下拉菜单，所以它没有选择下拉值其他下拉列表反之亦然，需要帮助/指针才能在这种情况下使用正确的逻辑。基本上，如果我从第一个下拉列表中选择 M1，从第二个下拉列表中选择 G1，那么我必须将 M1 和 G1 都发送到我的 ts 文件中，以便我可以根据这两个值进行 API 调用..

【问题讨论】：

对不起，我投了反对票，因为您的 html 中没有关于 selectedGrpMod 的任何内容。我在任何地方都看不到棱角分明。我无法想象您如何尝试将您的 .html 与您的 .ts 联系起来
添加了详细信息，请删除downvote n 帮助我解决它..

标签： angular drop-down-menu angular5

【解决方案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。

【讨论】：

嗨 Rajat，tahnks 回答，但我需要从两个下拉列表中传递两个选定的选项（所以我要记录他们两个的选项，假设我从第一个下拉列表和 G1 中获得了 M1从第二个开始，然后我将这两个都传递给 API））然后构造一个 API 调用并根据该 api 调用显示数据..我不确定上面的代码是否这样做......如果我错了，请纠正我
还有一个疑问，如何使用 DOM 将两个元素作为字符串访问： showData() { //通过 DOM 属性访问这两个元素 }
唯一剩下的问题是上面的代码总是选择第一个下拉值，即使我从下拉列表中选择任何其他值

【解决方案2】：

@Anad，不要使用 DOM，使用模板驱动表单，或者反应式表单或者用户输入https://angular.io/guide/user-input

最简单的，用User Input，我就用两个input，改用两个dropdown

@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);
  }
}

【讨论】：