[英]Angular6: Open dialog based on selected value in dropdown
我有一个p-dropdown
列表,其中包含一个包含多个选项的列表,以选择[options]="newUnitSelectItems"
。 目标是:如果用户从该选项列表中选择“其他”,则应打开一个新对话框。 如果用户从列表中选择任何其他值,则应执行一个简单的console.log
。 我该如何实现?
new.component.html
<p-dropdown name="newUnit" id="newUnit" [options]="newUnitSelectItems"
[(ngModel)]="Id"
(onChange)="performConsoleLog(Id, 'calc')"
></p-dropdown>
new.component.ts
performConsoleLog(unit: string, parameter: string) {
if (parameter === 'calc') {
console.log("No dialog open, unit: " + unit);
}
}
newUnitSelectItems() {
let selectItems: SelectItem[] = [
{label: "%", value:"%"},
{label: "g", value:"g"},
{label: "other", value:"other"}
];
return selectItems;
}
我想这里的(onChange)
是错误的,因为每次单击都会调用performConsoleLog()
。 有没有办法检查从html的[options]="newUnitSelectItems"
中选择了哪个值?
非常感谢!
您可以在
p-dropdown
选项中使用该command
。
newUnitSelectItems() {
let selectItems: SelectItem[] = [
{label: "%", value:"%"},
{label: "g", value:"g"},
{label: "other", value:"other", command :()=> this.openModal()} //<--command is here
];
openModal(){
console.log("Opening modal ");
}
从选择框中删除onChange
。
您可以使用change
事件的$event
获取选定的值:
<p-dropdown name="newUnit" id="newUnit" [options]="newUnitSelectItems"
[(ngModel)]="Id"
(onChange)="performConsoleLog($event)"
></p-dropdown>
在您的TS中:
performConsoleLog($event) {
if ($event.value.label === 'other') {
// open your dialog.
}
}
问候,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.