Angular ng-autocomplete 创建额外的 http 请求

Question

我正在使用 ng-autocomplete 从我的 API 查询结果。当我在输入字段中输入查询时，我得到了预期的响应。我的问题从这里开始。一旦我 select 该选项，我的查询将替换为数字 0 并发送另一个 HTTP 请求。

这是我获取服务器响应的方法

getServerResponse(event){
    console.log(parseInt(event))
    console.log(this.incentiveDashboardForm.controls["CustomerID"])
    this.incentiveDashboardForm.controls["CustomerID"].valueChanges
    .pipe(debounceTime(1000),distinctUntilChanged())
    // .subscribe(queryField  => this.routeService.getCustomerSearchMatch('1116-1417')
    .subscribe(queryField  => this.routeService.getCustomerSearchMatch(queryField)
    .subscribe(response => {
      console.log(response)
      this.results = response;
      let obj = response.find(e => e.customerName === e.customerName)
      for(var i = 0; i < response.length; i++) {
        console.log(response[i].customerID)
        var x = response[i].customerID;
        this.id = response[i].customerID;
        this.routeService.getListSitesForCustomer(x).subscribe(
          res => {
            //console.log(res);
            this.listsitesforcustomer = res;
            for(var i = 0; i < this.listsitesforcustomer.length; i++) {
              console.log(this.listsitesforcustomer[i])
            }
          }
        )
      }
    }
      )
    )
  }

这是我的HTML

<div class="ng-autocomplete">
                                <ng-autocomplete
                                    [data]="results"
                                    formControlName="CustomerID"
                                    
                                    [searchKeyword]="keyword"
                                    (selected)='selectEvent($event)'
                                    (inputChanged)='getServerResponse($event)' (inputFocused)='onFocused($event)' 
                                    (inputCleared)="searchCleared()"
                                    [itemTemplate]="itemTemplate"
                                    historyIdentifier="results"
                                    [notFoundTemplate]="notFoundTemplate"
                                    [placeholder]="'Type a customer number...'"
                                >
                                </ng-autocomplete>

                                <ng-template #itemTemplate let-item>
                                    <a [innerHTML]="item.customerName"></a>
                                    <a [innerHTML]="item.customerNumber"></a>
                                </ng-template>

                                <ng-template #notFoundTemplate let-notFound>
                                    <div [innerHTML]="notFound"></div>
                                </ng-template>
                            </div>

提前致谢。

我做错了什么？

Answer 1

你可以使用过滤运算符 https://rxjs-dev.firebaseapp.com/api/operators/filter

      filter(x => typeof x === 'string'),

所以你可以用

改变

this.incentiveDashboardForm.controls["CustomerID"].valueChanges
    .pipe(debounceTime(1000),
     distinctUntilChanged(),
     filter(x => typeof x === 'string'))
    
    .subscribe(queryField  => this.routeService.getCustomerSearchMatch(queryField)
    .subscribe(response => {
      console.log(response)
      this.results = response;
      let obj = response.find(e => e.customerName === e.customerName)
      for(var i = 0; i < response.length; i++) {
        console.log(response[i].customerID)
        var x = response[i].customerID;
        this.id = response[i].customerID;
        this.routeService.getListSitesForCustomer(x).subscribe(
          res => {
            //console.log(res);
            this.listsitesforcustomer = res;
            for(var i = 0; i < this.listsitesforcustomer.length; i++) {
              console.log(this.listsitesforcustomer[i])
            }
          }
        )
      }
    }
      )
    )

Angular ng-autocomplete 创建额外的 http 请求

Angular ng-autocomplete creates additional http request

angular

autocomplete