select2 事件在 angular4 中触发两次

Posted 2023-05-07

【中文标题】select2 事件在 angular4 中触发两次

【英文标题】：select2 event fires twice in angular4

【发布时间】：2018-04-04 20:56:50

【问题描述】：

标记

<select2 
         [data]="data"
         [width]="1024"
         [options]="options"
         [value]="selectedData"
         (valueChanged)="onTagChanged($event)">
</select2>

Angular 4 组件

onTagChanged(data:  value: string[] ): void 
    console.log(data);
    this.selectedData = data.value;

event valueChanged 触发两次，如何防止。

【问题讨论】：

在什么情况下？

@RahulSingh：从 select2 中选择任何值时，onTagChanged 函数调用了两次。控制台打印两次。

尝试onSelect 事件而不是valueChanged。

@AvneshShakya：这行不通。

@KetanAkbari 你能记录下这个事件吗？就我而言，我寻找event.isUserInput === true 第一个事件有这个，第二个没有。

【参考方案1】：

在

 onTagChanged(data:  value: string[] ): void 
    console.log(data);
    this.selectedData = data.value;

您再次更改了值，即 this.selectedData，因此值会更改两次，一次是在您选择一个值时，一次是您手动更改值。 由于该值与 selectedData 绑定，因此您无需在上述方法中显式更改它。

[value]="selectedData"

【参考方案2】：

你的代码应该是这样的

<select2 
         [data]="data"
         [width]="1024"
         [options]="options"
         (valueChanged)="onTagChanged($event)">
</select2>

只需删除 [value]="selectedData"