Angular 2 ng bootstrap typehead传递附加参数 [英] Angular 2 ng bootstrap typehead pass additional parameter

问题描述

如何将表单数组索引传递给ng-bootstrap标头中的getCities函数，包括当前输入文本.考虑 3 是表单数组索引.

How to pass form array index to getCities function in ng-bootstrap typehead including current input text. Consider 3 is form array index.

address.component.html

<input name="city" type="text" id="city" formControlName="city" [ngbTypeahead]="getCities">

address.component.ts

getCities = (text$: Observable<string>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(query =>
        query.length < 2 ? [] : this.apiService.getCities(query).catch(() => {
            return Observable.of([]);
        });)

推荐答案

听起来您需要将其他参数传递给ngbTypeahead函数(无论是索引参数还是其他参数).

It sounds like you are needing to pass an additional parameter to the ngbTypeahead function (be it an index parameter or otherwise).

文档( https://ng-bootstrap.github.io /#/components/typeahead/api )不提供传递参数，您可以实现工厂"方法，该方法返回带有传入的索引(或其他任何参数)参数的适当函数.

While the documentation ( https://ng-bootstrap.github.io/#/components/typeahead/api ) does not provide for passing parameters, you can implement a "factory" method that returns an appropriate function with the index (or whatever) parameter passed in.

address.component.html

    <input name="city" 
        type="text" 
        id="city"
        formControlName="city"
        [ngbTypeahead]="searchFunctionFactory($index)" >

address.component.ts

    //A function that returns a "search" function for our ngbTypeahead w/ "preloaded" parameters
    public searchFunctionFactory($index: any): (text: Observable<string>) => Observable<any[]> {


        //Create a function that considers the specified $index parameter value
        let getCities = (text$: Observable<string>) => 
            text$
                .debounceTime(300)
                .distinctUntilChanged()
                .switchMap( query => {

                    //some logic involving $index here
                    //...

                    //query.length < 2 ? [] : this.apiService.getCities(query).catch(() => {
                    //return Observable.of([]);
                });

        //Return that "custom" function, which will in turn be called by the ngbTypescript component
        return getCities;
    }

这篇关于Angular 2 ng bootstrap typehead传递附加参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！