Primeng Autocomplete - 不使用 Angular 中的反应形式修补值答案

【问题标题】：Primeng Autocomplete - Not patching the value using reactive form in AngularPrimeng Autocomplete - 不使用 Angular 中的反应形式修补值
【发布时间】：2020-01-09 21:23:03
【问题描述】：

我有最新版本的 Angular 并使用 Primeng 的自动完成功能并尝试在使用反应形式搜索匹配结果后修补值，但它没有反映，下面是我的代码：

HTML 代码：

<p-autoComplete formControlName="orderId" [suggestions]="orderList"
(completeMethod)="searchOrders($event)" (onSelect)="onOrderChange($event)" filter="label"
field="label" [autoHighlight]="true" [forceSelection]="true" dataKey="value">
</p-autoComplete>

TS 代码：

searchOrders(event) {
    this._orderService.getOrderList(event.query).subscribe(
      success => {
        if (success['orders'].length) {
          this.orderList = success['orders']
          this.formGroup.patchValue({ orderId: { value: '6614876352770211840' } })
        }
      },
      error => {
        // handling errors here
      }
    )
  }

我在orderList 变量中有一个对象数组([{value:'', label: ''}])，并且列表在搜索后正确显示在那里。 onOrderChange 方法对这个逻辑没有影响，我也通过传递相关查询单独调用了searchOrders 方法，在修补值之后，我尝试了不同的方法，但它不起作用。

【问题讨论】：

标签： angular autocomplete primeng

【解决方案1】：

终于找到了解决方案，这很容易但出乎意料。我们需要使用key 和value 的对象来修补该字段。这是 Primeng 的 Autocomplete 和 Chips Components 显示预定义值({ value: '6614876352770211840', label: 'ORD00459' }) 所必需的。
所以例子是：

TS 代码：

searchOrders(event) {
    this._orderService.getOrderList(event.query).subscribe(
      success => {
        if (success['orders'].length) {
          this.orderList = success['orders']
          this.formGroup.patchValue({ orderId: { value: '6614876352770211840', label: 'ORD00459' } })
        }
      },
      error => {
        // handling errors here
      }
    )
  }

【讨论】：