如何将数据发布到ng-select下拉列表并显示响应结果

时间:2019-02-21 11:02:52

标签: angular angular-ngselect

我们正在使用ng-select实现搜索和下拉菜单,并且在实现过程中遇到了一些问题。我已经使用此插件尝试了一些示例,但不知道如何实现这些功能

  1. 我想将数据发布到API,将响应显示为下拉结果。这里需要的参数是(搜索字符串,其他一些下拉值)

  2. 我没有看到任何有关如何将数据发布到服务并获得响应结果的示例。

  3. 并且在下拉菜单中键入内容时,一旦键入三个字母,则将其与其他值一起作为参数发送给API,并获取结果并将其显示为下拉列表中的结果。 POST:({{typedStr:string,otherDropdown:value})

  4. 我已将此控件放置在“反应式”角度表单中,在提交时,下拉菜单也不会以红色突出显示,但是本机选择下拉列表会突出显示。

我尝试将API服务而不是模拟数据放到它,但是它不起作用。请为此提供一些帮助

https://www.npmjs.com/package/@ng-select/ng-select

getPeople(term: string = null): Observable<customerNameModel[]> {

        let items = this.getMockPeople();

        if (term) {
            items = items.filter(x => x.partnerName.toLocaleLowerCase().indexOf(term.toLocaleLowerCase()) > -1);
        }
        return of(items);
    }

getMockPeople() {


        this.httpClient.post(this.CUSOTMERNA`enter code here`ME_API_URL, {
                    namestr:STR, 
                    typecode:typeCode
        }).pipe(map((response: any) =>   response ));

        return  [
            {
                "partnerID": "1000001",
                "partnerName": "ABC Plast",
                "customerAddress": "texsas, usa",
                "minCustFlag": "N"
            },
            {
                "partnerID": "1000003",
                "partnerName": "ABC Industries",
                "customerAddress": "nigeria, afria",
                "minCustFlag": "N"
            }       
        ]
}

  private loadCustomerName() {
    this.people3$ = concat(
        of([]), // default items
        this.people3input$.pipe(
          debounceTime(200),
          distinctUntilChanged(),          
          tap(() => this.Loading = true),
          switchMap(term => this.createInquiryService.getPeople(term).pipe(
              catchError(() => of([])), // empty list on error
              tap(() => this.Loading = false)
          )) 
        )
    );
  }

谢谢

0 个答案:

没有答案