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的{{1}}块； < / p>

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

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

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

Answer 1

就像您要检查值是否为string一样，您可以检查值是否为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 DEMO

选择项目时，垫自动完成功能保留最新选项

1 个答案: