Primeng p-dropdown onChange 获取Object的值答案

【问题标题】：Primeng p-dropdown onChange get value of the ObjectPrimeng p-dropdown onChange 获取Object的值
【发布时间】：2019-01-02 08:37:14
【问题描述】：

我有一个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 在我的html 中将参数设置为getValue。控制台总是打印[object Object]。

我想要查看实际值的动机是我需要该值来填充另一个下拉列表。我使用我试图查看的这个值作为实际填充另一个下拉列表的搜索值。此搜索不断返回undefined。

【问题讨论】：

你的东西是什么样子的？
@fastAsTortoise 它是一个Thing 类型的数组，具有三个字段number, string, and number。我知道这个数组things 已正确填充，因为这是我首先填充下拉列表的options 的方式。

标签： angular typescript primeng

【解决方案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 时，我需要第二个下拉列表来填充对应的names id。我在获取name 时遇到了麻烦，这正是我在这里提出的问题。这只是现在已解决的更大功能方案的一部分。

【讨论】：

嗨，当我尝试访问下拉列表名称时，我得到了未定义的名称..您能帮忙吗？我也想访问组件中下拉列表的名称！跨度>

【解决方案2】：

您应该格式化您的 things 数组以与 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'}}
        ];

&lt;p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"&gt;&lt;/p-dropdown&gt;

check out more examples here

【讨论】：

我认为您的建议是让我选择的值的类型与下拉列表的数组类型相同。我现在已经做到了（input 的类型为 Thing，数组 things 的类型为 Thing），但得到了相同的结果。
你能把东西贴出来吗？尝试发布尽可能多的信息，并尝试使用 #myInput 之类的模板变量并将其传递给您的函数。看起来你得到的是字符串而不是值。
我想通了。不必使用(onChange)。我会在稍后发布我的答案。

【解决方案3】：

这对我有用

项目

选定项目：任意； onProjectChange(e:any){

this.selectedProject = e.target.value; }

【讨论】：