时间戳

首页 > 解决方案 > 使用响应式表单时 nz-autocomplete 的默认值

autocomplete - 使用响应式表单时 nz-autocomplete 的默认值

问题描述

当我的表单处于编辑模式时，我试图在 nz-autocmplete 上设置一个默认值。但是输入显示为 [object Object]。只有当您从 nz-autocmplete 下拉菜单中手动选择它时，它才会按预期工作。

我在用：

这是输入代码片段：

<nz-form-item>
 <nz-form-label nzRequired [nzSm]="10" [nzXs]="24" nzFor="mainClient">
   <span class="intern-detail">Hlavny klient</span>
 </nz-form-label>
 <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="userErrorTpl">
  <nz-input-group [nzSuffix]="addNewClientButton">
   <input formControlName="mainClient" nz-input [nzAutocomplete]="clientAutocomplete"/>
  </nz-input-group>
 </nz-form-control>
</nz-form-item>

这是自动完成的代码片段：

<nz-autocomplete #clientAutocomplete [compareWith]="compareFun">
  <nz-auto-option *ngFor="let client of filteredClients" [nzValue]="client" [nzLabel]="client.name">
      <p class="small-height bold">{{ client.name }}</p>
      <p class="small-height tiny-font">{{ client.email }}</p>
      <p class="small-height tiny-font">{{ client.phoneNumber1 }}</p>
  </nz-auto-option>
</nz-autocomplete>

感谢您提出如何解决此问题的任何想法。

标签： autocompleteng-zorro-antd

解决方案

我有同样的问题，我的问题的原因是我使用的是动态数据源。

由于我的动态数据源在初始化时为空 nz-autocomplete 没有可比较的，所以它返回[Object, Object]

所以我必须做的是将作为控制字段值的数据编码为初始化时动态数据中的相同数据。

对您而言，这意味着filteredClients必须具有您为mainClient控制字段值设置的相同初始数据。

推荐阅读