Question

我是Angular的新手，我正在尝试制作一个使用ng-bootstrap typeahead组件的实用示例。我想在我的组件的标签中传递一个字符串数组（或其他，直到它是动态且可重用的，而无需出于相同目的而添加新组件）。然后，当用户使用某些术语提示时，它应该与我传递的字符串之一匹配。

我使用Angular 6。

我已经尝试用@Input（）绑定动态数组，但是当Angular尝试评估绑定时，它似乎还没有值。

这是我要实现的目标的一个例子。

我调用我的组件并传递值数组

<ngbd-typeahead-focus [items] ="['hello','goodbye', 'test']"></ngbd-typeahead-focus>

然后在我的.ts文件中，我尝试将用户输入的术语与值数组匹配。

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';

@Component({
  selector: 'ngbd-typeahead-basic',
  templateUrl: './typeahead-basic.html',
  styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadBasic {
  public model: any;

  @Input()  
  items: any[];

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : items.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    )

}

我正在做的目标是重用ngbd-typeahead-focus标签，但要使用不同的值数组。

感谢您的帮助。

动态将数据数组传递给Angular中的ng-bootstrap typeahead组件

0 个答案: