如何在 ng-bootstrap 中动态添加 typeahead？ Angular 7/8

Question

我在 Angular 中使用 ng-bootstrap 作为我的前端设计。

我需要使用它的 TypeAhead 组件，它是Ng-Bootstrap 的 TypeAhead

但问题是我正在实施一个 FormArray。 我需要动态添加 TypeAhead。 它工作正常，直到我使用“tab”键，因为它使用一个实例，当我按下 tab 键时，它会同时打开。

我试图解决这个问题。

focus(event, i) {
  this.focusArr[i] = new Subject<string>();
    this.focusArr[i].next(event)'
    this.indexCount = i;
  }  
}

click(event, i){
  this.clickArr[i] = new Subject<string>();
  this.clickArr[i].next(event);
  this.indexCount = i;
}

searchItem = (text$: Observable<string>) => {
  var click = this.clickArr[this.indexCount];
  var focus = this.focus[this.indexCount];
  const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
  const clicksWithClosedPopup$ = click.pipe(filter(() => !this.instance.isPopupOpen()));
  const inputFocus$ = focus;

  return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
    map(term => (term === '' ? this.itemListHolder
      : this.itemListHolder.filter(v => v.toLowerCase().indexOf(term.toString().toLowerCase()) > -1)).slice(0, 10))
    );
}

那么html就是：

<input id="typeahead-focus" type="text" class="form-control" placeholder="Choose an Item" formControlName="itemSelected"
    [ngbTypeahead]="searchItem" (focus)="focus($event.target.value, i)"
    (click)="click($event.target.value, i)" #instance="ngbTypeahead" />

这是错误消息：

您在需要 stream 的地方提供了“未定义”。 您可以提供 Observable、Promise、Array 或 Iterable。

我不知道了:(

Answer 1

认为我明白了

searchItem用于所有预输入。 在searchItem ，对indexCount有依赖关系：

var click = this.clickArr[this.indexCount];
var focus = this.focus[this.indexCount];

indexCount是最后单击或聚焦的元素 。 this.clickArr[this.indexCount]可以理解为“对于最后单击的元素可观察到的点击”。 并且每个预输入将收听最后单击的元素。

作为解决方案，我将提供输入以订阅事件。

searchItem(input: HTMLInputElement) {
   return (text$: Observable<string>) => {
      const click = fromEvent(input, 'click');
      const focus = fromEvent(input, 'focus');
   }
}

并在html中

<input #input [ngbTypeahead]='searchItems(input)' />

支持单击和焦点事件的可观察对象数组时，感觉会更轻松。

Answer 2

这有点愚蠢..但是工作！

所以：

相反[ngbTypeahead]="searchFactorMain"使用[ngbTypeahead]="getSearchFactorMain(i)"

    getSearchFactorMain(i) {
        return (text$: Observable<string>) => {
            const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
            this.focusArr[i] = new Subject<string>();
            const inputFocus$ = this.focusArr[i];

            return merge(debouncedText$, inputFocus$).pipe(
                map((term) =>
                    (term === '' ? this.factorData : this.factorData.filter((v:any) => v.factorName.toLowerCase().indexOf(term.toLowerCase()) > -1)),
                ),
            );
        };
    }

和

将模板中的 (focus) 替换为： (focus)="focusFactor($any($event).target.value, i)"

focusFactor(target: any, i: number) {
        this.focusArr[i].next(target);
        this.factorIndexCount = i;
    }

瞧！