微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ng-select atype with typeahead,添加第一个项目后,服务器端搜索不会触发搜索typeahead

如何解决ng-select atype with typeahead,添加第一个项目后,服务器端搜索不会触发搜索typeahead

我的问题:

  • 键入3个字符后,将调用我的服务。
  • 从下拉列表中选择一项后,不会触发任何事件,因此不会有新的过滤项列表替换原始列表
  • 原始列表会卡住,除非我更改其内容,但无法获得相关条款
  • 我尝试使用[searchFn],但是却收到了大量来电(我按长度和术语变化对我进行了过滤,如图所示,但是一旦我选择了第一项,它就会突然静音,因此,再次也没有第二次对另一个过滤的呼叫列表

尝试触发可观察到的提前

示例:

  • 首先搜索“ aaa”消防服务并提供包含“ aaa”的物品的列表,所以我选择一个
  • 输入“ bbb”不会触发事件来获取新的过滤列表。

我使用的是angular 8,所以是ng-select @ 3(以防万一,它没有被反向移植)

我的html :(省略了标签和位置)

        <ng-select #select
      [searchFn]="searchFn"
      dropdownPosition="auto"

      [searchWhileComposing]="true"
      [clearSearchOnAdd]="true"

      [editableSearchTerm]="true"

      [typetoSearchText]="true"
      [hideselected]="true"
      [minTermlength]="3"
      
      [typeahead]="itemInput$"
      [multiple]="true"
      [items]="items$ | async"

      [readonly]="isdisabled"
      [bindLabel]="'descripcion'"
      [bindValue]="'id'"
      ></ng-select>

我的组件

      searchFn = (term: string,item: any) => {
    this.dbgCount += 1;
    // console.log(this);
    console.log('term ' + this.dbgCount + '):' + term.length,term);
    console.log('term ' + this.dbgCount + '):' + term.length,term);

    // this.itemInput$.next(term);

    if (term && term.length >= 3 && this.lastTerm !== term) {
      this.lastTerm = term;
      // call my service
      this.searchByTerm(term).subscribe((v) => { 
        console.log('v',v);
        console.log('v.length',v.length);
        this.items$ = of([...v]);
      });
    }
    return findpositionforterm(term,item);
  };

真的很感谢您的帮助。 感谢您所做的如此出色的工作。

---爱德华多

PD:找到了解决方法,在添加/更改后重新启动可观察到的输入

      addItem(ev) {
    console.log('addItem ev:',ev);
    this.loadItems();
  }
  changeItem(ev) {
    console.log('changeItem ev:',ev);
    this.loadItems();
  }

请,如果您知道更好的方法,我很想听听它。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。