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

Question

我的 html 页面有 5 个 primeNg p-dropdown，我想读取任何 p-dropdown 的更改事件的所有 5 个下拉列表的值，以便我可以对所有 selected 值应用过滤器以在数据网格中显示数据。我正在尝试使用模板引用变量，但运气不好

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

所以从公司下拉列表我会 select 索尼从下拉列表然后在更改事件我想要其他两个下拉菜单的值

预期输出：-

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>

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

primeNg : get value of all the p-dropdown on change event of one drop down

typescript

primeng

angular

primeng-dropdowns

angular11