Question

背景嘿！我正在使用Angular 5和PrimeNG的最新更新（5.2.0）。我正在尝试使用PrimeNG列表框，这样当您在列表框中选择一个选项时，所述项目的值将显示在文本框中，然后该选项将取消选择自身，以便用户可以再次选择相同的选项。

Here's the stackblitz for what I currently have.

如您所见，第一次单击列表框中的选项时，它会成功取消选择。但是，随后您单击列表框时，该选项不再取消选择。

尝试解决方案：如果您看不到stackblitz，我当前的代码如下：

HTML：

<p-listbox [options]="cities"
           [(ngModel)]="selectedCity"
           [style]="{'width':'200px'}"
           optionLabel="name"
           filter="filter"
           (onChange)="addField()"></p-listbox>

<input type="text" [(ngModel)]="text">

app.component.ts：（为了空间而不包括导入）

  cities;

  selectedCity;

  text: string = '';

  constructor() {
    this.cities = [
      {name: 'New York', code: 'NY'},
      {name: 'Rome', code: 'RM'},
      {name: 'London', code: 'LDN'},
      {name: 'Istanbul', code: 'IST'},
      {name: 'Paris', code: 'PRS'}
    ];
  }

  addField() {
    this.text += this.selectedCity.code;
    this.selectedCity = null;
  }

在更改列表框的值时，我将所选选项的值连接到一个字符串，该字符串绑定到文本输入字段。然后我将所选的选项变量（selectedCity）设置为null，理论上应该“清除”选择。我不太清楚为什么它第一次工作但在那之后停止工作。我有一种感觉它与onChange如何处理变化有关，但我不太确定。

感谢您的帮助和解释！

更新：遗憾的是，（onChange）看起来不太可靠，无法检测到更改，因此我已将其切换为（点击），现在可以使用了。

PrimeNG列表框 - 选择并立即取消选择一个选项？

0 个答案: