primeNg ：在一个下拉列表的更改事件中获取所有 p 下拉列表的值

如何解决primeNg ：在一个下拉列表的更改事件中获取所有 p 下拉列表的值

我的 html 页面上有 5 个 primeNg p-dropdown 的情况，我想在任何 p-dropdown 的更改事件中读取所有 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,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

请帮我解决这个问题..

解决方法

尝试使用 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>