primeNg:在一个下拉列表的变化事件上获得所有p下拉列表的值

Question

我有一个情况，在我的html页面上有5个primeNg p下拉列表，我想在任何p下拉列表的更改事件中读取所有5个下拉列表的值，这样我就可以对所有选定的值应用过滤器，以在数据网格中显示数据。我正在尝试使用模板参考变量，但没有运气

app.component.html

<p-table>
<ng-template pTemplate="header">
<tr>
<td>
Compnay Name <p-dropdown #cmpDropDown [options]="cmpResp" optionLabel="cmpName"
optionValue="cmpId" scrollHeight='150px'
(onChange)="getChangeAppDetails(cmpDropDown.value, deptDropDown, prodDropDown)">
</p-dropdown>
</td>
<td>
Department Name <p-dropdown #deptDropDown [options]="deptResp" optionLabel="deptName"
optionValue="deptId" scrollHeight='150px' 
(onChange)="getChangeDeptDetails(deptDropDown.value, cmpDropDown, prodDropDown)"> </p-dropdown>
</td>
<td>Product Name <p-dropdown #feedDropDown [options]="prodResp" optionLabel="prodName" optionValue="prodId"
scrollHeight='150px' getChangeProdDetails(prodDropDown.value, cmpDropDown, deptDropDown)> </p-dropdown>
</td>                   
</tr>                
</ng-template>
</p-table>

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 cmpResp             : any;
public deptResp            : any = [ {"deptId": "ALL", "cmpId": "ALL", "deptName": "ALL"}];
public prodResp            : any = [ {"prodId": "ALL", "deptId": "ALL", "prodName": "ALL"}];

ngOnInit(){    

//Get Compnay List
this.cmpResp = [{"cmpId" : "ALL", "cmdName" : "ALL"}, {"cmpId" : "Sony", "cmdName" : "Sony"}, {"cmpId" : "Samsung", "cmdName" : "Samsung"}]        

}//End of ngOnInIt

//Change event of Compnay drop down
getChangeCompnyDetails(cmpDropDownVal: String, deptDropDown: HTMLSelectElement, prodDropDown: HTMLSelectElement): void {        

console.log("Compnay Id :- ", cmpDropDownVal)
console.log("Department Id :- ", deptDropDown.value)
console.log("Product Id :- ", prodDropDown.value)

}

所以在公司下拉列表中，我将从下拉列表中选择索尼，然后在更改事件中，我想要其他两个下拉列表的值以及

预期输出：-

Compnay Id    :- Sony
Department Id :- ALL
Product Id    :- ALL

但它给了我

Compnay Id    :- Sony
Department Id :- Undefine
Product Id    :- Undefine

请帮我做这件事。。

Answer 1

尝试使用ngmodel。

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'AngularUi';
cmpDropDown = null;
deptDropDown = null;
feedDropDown = null;
public deliveryDataResp    : any;
public deliveryDataRespBck : any;
public cmpResp             : any;
public deptResp            : any = [ {"deptId": "ALL", "cmpId": "ALL", "deptName": "ALL"}];
public prodResp            : any = [ {"prodId": "ALL", "deptId": "ALL", "prodName": "ALL"}];
ngOnInit(){
//Get Compnay List
this.cmpResp = [{"cmpId" : "ALL", "cmdName" : "ALL"}, {"cmpId" : "Sony", "cmdName" : "Sony"}, {"cmpId" : "Samsung", "cmdName" : "Samsung"}]
}//End of ngOnInIt
//Change event of Compnay drop down
onChange(): void {
console.log("Compnay Id :- ", this.feedDropDown)
console.log("Department Id :- ", this.deptDropDown)
console.log("Product Id :- ", this.feedDropDown)
}
}

<p-table>
<ng-template pTemplate="header">
<tr>
<td>
Compnay Name <p-dropdown [options]="cmpResp" optionLabel="cmpName"
optionValue="cmpId" scrollHeight='150px'
[(ngModel)]="cmpDropDown"
(onChange)="onChange()">
</p-dropdown>
</td>
<td>
Department Name <p-dropdown [options]="deptResp" optionLabel="deptName"
optionValue="deptId" scrollHeight='150px'
[(ngModel)]="deptDropDown"
(onChange)="onChange()"> </p-dropdown>
</td>
<td>Product Name <p-dropdown [options]="prodResp" optionLabel="prodName" optionValue="prodId"
[(ngModel)]="feedDropDown" scrollHeight='150px'  (onChange)="onChange()"> </p-dropdown>
</td>
</tr>
</ng-template>
</p-table>