【发布时间】：2021-05-18 18:45:52
【问题描述】：
我是 Angular 世界的新手，我的 html 页面上有一个情况，我有 5 个下拉菜单，我想在任何下拉菜单的点击事件中读取所有 5 个下拉菜单的值，以便我可以对所有选定的值应用过滤器以在数据网格中显示数据。
所以我的问题是，Angular 是否可以做到这一点，如果可以，请分享一些例子。
app.component.html
<div>
<table>
<tbody>
<tr>
<td> Compnay Name :
<select #cmpDropDown (change) = "getChangeCompnyDetails(cmpDropDown.value, deptDropDown, prodDropDown)">
<option [value]="cmpItem.cmpId" *ngFor = "let cmpItem of cmpResp;">{{cmpItem.cmpName}}</option>
</select>
</td>
<td> </td>
<td> Department Name
<select #deptDropDown (change) = "getChangeDeptDetails(deptDropDown.value, cmpDropDown, prodDropDown)">
<option [value]="deptItem.deptId" *ngFor = "let deptItem of deptResp;">{{deptItem.deptName}}</option>
</select>
</td>
<td> </td>
<td> Product Name
<select #prodDropDown (change) = "getChangeProdDetails(prodDropDown.value, cmpDropDown, deptDropDown)">
<option [value]="prodItem.prodId" *ngFor = "let prodItem of prodResp;" >{{prodItem.prodName}}</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div> </div>
<!-- Show data in grid -->
<div>
<table style="width:100%" border="1">
<thead >
<tr> </tr> <tr> </tr>
<tr >
<th scope="col">Order No</th>
<th scope="col">ProductName</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let dataRowItem of deliveryDataResp">
<td> {{dataRowItem.ordNum}}</td>
<td> {{dataRowItem.prodName}}</td>
<td> {{dataRowItem.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
app.component.ts :-
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'AngularUi';
public deliveryDataResp : any;
public deliveryDataRespBck : any;
public deptResp : any = [ {"deptId": "ALL", "cmpId": "ALL", "deptName": "ALL"}];
public prodResp : any = [ {"prodId": "ALL", "deptId": "ALL", "prodName": "ALL"}];
ngOnInit(){
//Get Compnay List
let obj = this.http.get(cmpApiUrl).subscribe((cmpResp)=>{
this.cmpResp = cmpResp;
})
//Get delivery details
let deliveredObj = this.http.get(deliveredApiUrl).subscribe((deliveryDataResp)=>{
this.deliveryDataResp = deliveryDataResp;
this.deliveryDataRespBck = deliveryDataResp;
})
}//End of ngOnInIt
getChangeCompnyDetails(cmpDropDownVal: String, deptDropDown: HTMLSelectElement, prodDropDown: HTMLSelectElement): void {
calling department api with cmpDropDownVal, now API will give list of department associated with Company (with this call department drop down will be updated with new list of department values)
//As department drop down is updated with above call so now we need updated department list (how we will get updated department dropdown value ?)
this.departmentIdSelected = this.deptResp[0].deptId; //here I am trying to get the data from object returned by subscribe but as subscribe is async call so deptId is not accessible here hence finding way to get selceted value of department drop down so that can filter on that id
this.prodIdSelected = this.prodResp[0].prodId;
this.filterDataGrid(cmpIdSelected, departmentIdSelected, prodIdSelected)
}
getChangeDeptDetails($event){
this.deptIdSelected = event.target.value;
//get product list by calling product api for deptId
}
filterDataGrid()
{
this.deliveryDataResp = this.deliveryDataRespBck.filter( (obj: any) => {
if(obj.cmpId === cmpSelVal && obj.deptId === deptSelVal && obj.prodId === prodSelVal){return true;} return false;
})
}
}
【问题讨论】：
-
如果您在初次尝试时提供一些代码，将会很有帮助。一些 HTML &Typescript。
-
您是否尝试过为每个下拉菜单使用
[(ngModel)]