Автозаполнение только при пожаре, если введено более 2 символов

Question

У меня есть компонент автозаполнения материала, который работает довольно хорошо. Я бесстыдно собрал все это из различных онлайн-примеров. Я изо всех сил пытаюсь выяснить, как запустить поиск только при вводе 2 или более символов.

assignSearchAutocomplete(){
    this.acCtrl.valueChanges
        .pipe(
            debounceTime(500),
            tap(() => {
                this.acErrorMsg = "";
                this.acFilteredItems = [];
                this.acIsLoading = true;
            }),
            switchMap(value => this.svcGetFacetGql.watch({ name: ".*" + value + ".*", label: this.facetLabel, options: { fetchPolicy: 'cache-and-network' } })
                .valueChanges
                .pipe(
                    tap(() => {
                        this.acIsLoading = false
                    }),
                )
            )
        )
        .subscribe(response => {
            if (response['data'] == undefined) {
                this.acErrorMsg = response['Error'];
                this.acFilteredItems = [];
            } else {
                this.acErrorMsg = "";
                this.acFilteredItems = response['data']['Facet'];
            }
        });
}

Я пытался вставить оператор if и использовать троичный оператор:? но не могу заставить его работать.

Спасибо

Answer 1

Вы можете отфильтровать эти значения, если строка пуста или слишком коротка.

assignSearchAutocomplete(){
    this.acCtrl.valueChanges
        .pipe(
            // new part
            filter(value => value && value.length >=2),
            // end of new part
            debounceTime(500),
            tap(() => {
                this.acErrorMsg = "";
                this.acFilteredItems = [];
                this.acIsLoading = true;
            }),
            // ...
        )
        .subscribe(response => {
            if (response['data'] == undefined) {
                this.acErrorMsg = response['Error'];
                this.acFilteredItems = [];
            } else {
                this.acErrorMsg = "";
                this.acFilteredItems = response['data']['Facet'];
            }
        });
}

Answer 2

Что если вы попробуете с filter?

this.acCtrl.valueChanges
  .pipe(
    debounceTime(500),
    filter(value => value.length > 2),
    tap(() => {
    ...
    }
  );