Angular 9:一种形式不止一种 ngb-typeahead? [英] Angular 9: More than one ngb-typeahead in one form?

问题描述

我正在使用来自 NG-Boostrap 6.0.3 的 NgbTypeahead 组件 在我的 Angular 9 应用程序中.第一个工作正常，但我的表单有很多.

I am using the NgbTypeahead component from NG-Boostrap 6.0.3 in my Angular 9 app. The first one works fine, but my form has quite a few.

我是否需要为每个视图添加单独的 ViewChild 和单独的搜索功能?或者我错过了什么?有人可以给我指出一个不止一个的例子吗?

Do I need to add a separate ViewChild and a separate search function for each one of them? Or am I missing something? Can someone point me to an example with more than one?

作为参考，这里有一个 Stackblitz，只有一个.

For reference, here's a Stackblitz with just the one.

推荐答案

好吧，我的评论真的不正确，假设您有 2 个 ngbTypeHead 您需要 focus$ 和 click$ 是一个数组，为此，您可以使用 map，有些喜欢

well, really my comment is NOT correct, imagine you has 2 ngbTypeHead You need that focus$ and click$ was an array, for this, you can use map, some like

focus$ = [0,1].map(_=>new Subject<string>());
click$ = [0,1].map(_=>new Subject<string>());

嗯，你也可以做一些像(我用的是傻瓜数组和地图)但它是一样的:

Well, you can also too make some like (I use a fool array and map) but it is the same than:

focus$ = [new Subject<string>(),new Subject<string>()];

我在模型中使用了一个数组

I use an array to the model

model: any[]=[];

并更改作为参数接收的searchFunction:一个索引，一个实例和一个术语(索引是引用主题所必需的

And change the searchFunction that received as parameters: an index, a instance and a term (the index is necesary to make reference to the subjects

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

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

然后，我们唯一需要的是改变我们的 ngbTypeahead

Then, the only we need is change our ngbTypeahead

  <input
        ...
  [(ngModel)]="model[index]"
  [ngbTypeahead]="searchType(i,instance,$text)"
  (focus)="focus$[i].next($any($event).target.value)"
  (click)="click$[i].next($any($event).target.value)"
  #instance="ngbTypeahead"
  >

您可以在 stackblitz

更新如果我们需要不同的数据，我们可以改进传递数据"的函数搜索，所以，如果我们添加一个新的参数来搜索:

Update if we need differents data, we can improve the function search passing the "data", so, if we add a new parameter to search:

searchType(index,instance, data,text$) { //<--pass "data"
    return (text$: Observable<string>) => {
      const debouncedText$ = text$.pipe(
        debounceTime(200),
        distinctUntilChanged()
      );
      const clicksWithClosedPopup$ = this.click$[index].pipe(
        filter(() => !instance.isPopupOpen())
      );
      const inputFocus$ = this.focus$[index];

      return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
        map(term =>
          (term === ""
            ? data          //<--here use data
            : data.filter(  //<--here use data too
                v => v.toLowerCase().indexOf(term.toLowerCase()) > -1
              )
          ).slice(0, 10)
        )
      );
    };
  }

我们可以更改调用并写入:

We can change the call and write:

[ngbTypeahead]="searchType(i,instance,states,$text)"

另一种选择是，根据索引"在一个或另一个数组中搜索，这样函数就变成了

Another option is, according to the "index" search in one or another array, so the function becomes like

searchType(index,instance, text$) { 
    const data=index==0?states:this.fruits; //<--the data according the index
    return (text$: Observable<string>) => {
      const debouncedText$ = text$.pipe(
        debounceTime(200),
        distinctUntilChanged()
      );
      const clicksWithClosedPopup$ = this.click$[index].pipe(
        filter(() => !instance.isPopupOpen())
      );
      const inputFocus$ = this.focus$[index];

      return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
        map(term =>
          (term === ""
            ? data          //<--here use data
            : data.filter(  //<--here use data too
                v => v.toLowerCase().indexOf(term.toLowerCase()) > -1
              )
          ).slice(0, 10)
        )
      );
    };
  }

这篇关于Angular 9:一种形式不止一种 ngb-typeahead?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！