Question

我有一个p-dropdown，我想在其中获取所选的值。

<p-dropdown optionLabel="name" [options]="things"
                  placeholder="Select Thing" [(ngModel)]="input" (onChange)="getValue(input)"></p-dropdown>

打字稿：

//each line prints the same thing of [object Object].
getValue(changedValue){
    console.log(changedValue);
    console.log(this.input);
    console.log(this.input.valueOf());
}

我还尝试使用(ngModelChange)代替(onChange)，并尝试使用$event，$event.target.value，$event.value作为getValue的参数在我的HTML中。控制台始终打印[object Object]。

我希望看到实际值的动机是我需要该值来填充另一个下拉列表。我将尝试使用的值用作搜索值，以实际填充其他下拉列表。此搜索不断返回undefined。

Answer 1

要获取第一个下拉菜单的值，我不需要使用(onChange)。只需使用[(ngModel)]将两个下拉列表基于相同的值，但是就像我已经填写的那样填充它们的选项。

<p-dropdown optionLabel="name" [options]="things"
                  placeholder="Select Name" [(ngModel)]="input"></p-dropdown>

<p-dropdown optionLabel="id" [options]="things"
                  placeholder="Select ID" [(ngModel)]="input"></p-dropdown>

ts：

things: Thing[];
input: String;

things如下所示：

things = [
        {id: 20, name: 'First'},
        {id: 45, name: 'Second'},
        {id: 22, name: 'Third'},
        {id: 67, name: 'Fourth'},
        {id: 88, name: 'Fifth'}
];

输入事物

id: number;
name: string;

所以我需要的是，当我在第一个下拉列表中选择name时，我需要第二个下拉列表来填充与name相对应的id。我在获取name时遇到了麻烦，这是我在这里实际提出的问题。那只是现在已经解决的更大的功能方案的一部分。

Answer 2

您应该格式化事物数组，使其与ng prime的下拉期望兼容，如下所示。

interface City {
  name: string;
  code: string;
}

selectedCity1: City;

this.cities1 = [
            {label:'Select City', value:null},
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"></p-dropdown>

check out more examples here

启动p下拉式onChange获取对象的值

2 个答案: