angular - 选择项目时，Mat-autocomplete 保留最近的选项

Question

我正在使用mat-autocomplte&displayFn管道async。

this.genericAutoComplete$ = this.acFormControl.valueChanges.pipe(
                startWith(''),
                debounceTime(400),
                distinctUntilChanged(),
                switchMap(value => {
                    if (value && typeof (value) === "string" && value.length > 2) {
                        return this.searchData(value);
                    } else {
                        return of(null);
                    }
                })
            );

现在我的问题是，当我从列表中选择选项时，valueChange将调用＆因为我正在使用 displayFn 值将是对象，因此else将执行块returns of(null)；

我想要做的是在焦点/点击自动完成时显示以前返回/现有的列表。

因此，当我选择选项时，列表不应该变得清晰。

我不知道该怎么做。谁能指出我正确的方向？

Answer 1

就像您检查值是否为 a 一样string，您可以检查该值是否为 a object。如果是，则返回按您定义的对象属性进行搜索。在我的演示中，这将是属性name：

this.filteredOptions = this.myControl.valueChanges.pipe(
  startWith(''),
  debounceTime(400),
  switchMap(value => {
    if (value && typeof (value) === "string" && value.length > 2) {
      return this.doFilter(value);
    } 
    // add this check:
    if (typeof (value) === "object") {
      // filter by the object property you have, for me it's "name"
      return this.doFilter(value.name);
    }
    // no need for else, if either of above is truthy, this code wont be executed
    return of(null);
  })
);

StackBlitz 演示