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

Question

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

我需要使用其TypeAhead of 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" />

这是错误消息：

  

您在期望流的位置提供了“未定义”。您可以提供一个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)' />

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