Question

我有一个p-autocomplete元素（primeng 7.0.5），它控制一个自定义对象字段（组织视图类型）。

这是标记：

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

state.organization用以下代码触发设置器：

> object null
> string

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

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

progress {
    -webkit-appearance: none;
}

progress::-webkit-progress-bar {
    background-color: orange;
}

.progress-bar span {
    position: absolute;
    display: inline-block;
    color: #fff;
    text-align: right;
}

.progress-bar {
    display: block;
    position: relative;
    width: 100%;
}

progress {
    width: 100%;
}

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

Answer 1

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

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

Answer 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}}">

您也可以使用

之类的选择方法

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

如果您不会在.ts文件中做任何其他事情

PrimeNg自动完成功能在清除时发送空字符串

2 个答案: