PrimeNg 自动完成在清除时发送空字符串答案

【问题标题】：PrimeNg Autocomplete sends empty string on clearPrimeNg 自动完成在清除时发送空字符串
【发布时间】：2020-03-03 21:56:18
【问题描述】：

我有一个控制自定义对象字段（类型 OrganizationView）的 p-autocomplete 元素（primeng 7.0.5）。

这里是标记：

<p-autoComplete
    [(ngModel)]="state.organization"
    (completeMethod)="onSearchOrganisation($event)"
    (onClear)="state.organization = null"
    (onSelect)="onOrganizationSelected($event)"
    [emptyMessage]="'GLOBALS.NORESULT' | translate"
    [forceSelection]="true"
    [suggestions]="availableOrganizations"
    [dropdown]="true"
    field="name"
    placeholder="{{'PLACEHOLDERS.ORGANISATION' | translate}}">

state.organization 使用以下代码触发 setter：

set organization(newOrganization: OrganizationView) {
    this._organization = newOrganization;
    console.log(typeof newOrganization, newOrganization);
  }

从自动完成中选择值时，我总是按预期获得 OrganizationView 对象。清除字段时出现问题：

清除时（用鼠标全选并按退格键），我的 setter 被触发 2 次：一次为 null，第二次为空字符串。这是 console.log 输出：

> object null
> string

字符串的插入让我很担心，因为它弄乱了我尝试设置的整个强类型系统。我可以为空字符串编写显式检查，但我想知道是否有更干净的解决方案，或者我是否有问题。

【问题讨论】：

您好，我很好奇您是如何处理这个问题的？我现在遇到了类似的问题，并希望该值为 null 但它是一个空字符串
你好托莫。不幸的是，我不得不放弃任何干净的解决方案。我明确检查了空字符串（通过 === 运算符），并在继续之前将其转换为 null。不过，也许他们已经修复了这个错误。我不再从事那个项目了。抱歉，我想提供一些比这更好的解决方案...

标签： angular autocomplete primeng

【解决方案1】：

我遇到了同样的问题并使用此解决方法：

set organization(newOrganization: OrganizationView) {
    this._organization = newOrganization ? newOrganization : <OrganizationView>{};
    console.log(typeof newOrganization, newOrganization);
  }

【讨论】：

【解决方案2】：

我也遇到了同样的问题。一种解决方法是删除数据绑定并仅使用 onClear 和 onComplete 事件来设置/清除字段。

<p-autoComplete
    <!-- [(ngModel)]="state.organization" remove this binding-->
    (completeMethod)="onSearchOrganisation($event)"
    (onClear)="state.organization = null"
    (onSelect)="onOrganizationSelected($event)"
    [emptyMessage]="'GLOBALS.NORESULT' | translate"
    [forceSelection]="true"
    [suggestions]="availableOrganizations"
    [dropdown]="true"
    field="name"
    placeholder="{{'PLACEHOLDERS.ORGANISATION' | translate}}">

你也可以使用类似的select方法

(onSelect)="state.organization = $event"

如果你不会在 .ts 文件中做任何额外的事情

【讨论】：