Question

我拥有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
      }
    )
  }

我在([{value:'', label: ''}])变量中有一个对象orderList的数组，搜索后列表正确显示。 onOrderChange方法不会影响此逻辑，我也通过传递相对查询来分别调用searchOrders方法，在对值进行修补之后，我尝试了不同的方法，但是它不起作用。

Answer 1

最后，找到了解决方案，这很容易，但出乎意料。我们需要使用key和value的对象来修补字段。这是“自动完成”和“ Primeng的芯片组件”显示预定义值({ 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
      }
    )
  }

Primeng自动完成-不使用Angular中的反应形式修补值

1 个答案: