带有过滤器的Angular 7 mat自动完成功能不起作用答案

【问题标题】：Angular 7 mat autocomplete with filter not working带有过滤器的Angular 7 mat自动完成功能不起作用
【发布时间】：2020-03-15 03:19:49
【问题描述】：

我正在尝试实现一个自动完成机制，但我无法让它发挥作用。
我已经使用我正在使用的逻辑实现了 Stackblitz（您可以找到它here），并且它正在正常工作。
问题是在我的应用程序中无法正常工作：如果我将焦点设置为输入，我不会获得可以过滤用户输入的数据列表。
我的代码中唯一不同的是我从服务器获取数据，所以我的 ngOnInit() 函数有点不同：

     ngOnInit() {
    this.networkService.getDataFromServer().subscribe(c => {
      DATA = c;
      this.cooperativeFiltrate = this.cercaCooperativa.valueChanges.pipe(
        startWith(''),
        map(value => this._filter(value))
      )
    });
  }

如何解决此问题？

更新
我检查了一些东西，_filter 函数第一次没有用户输入，返回包含所有值的数组。如果我写了一些东西，它会正确过滤值。但是自动完成仍然没有显示任何值。

【问题讨论】：

您能否阐明重现的确切步骤？在您的 StackBlitz 中，如果我输入“test1”，它只会显示“test1”。我可以选择“test1”，然后删除“test1”的“1”，它会显示所有三个项目。如果我添加一个“2”，它是“test2”，它只显示“test2”。如果我然后删除所有文本，它会显示所有选项。它似乎通常可以作为可过滤列表工作。究竟是什么问题？如何准确复制它？如果我点击离开，它不会显示任何选项，因为垫子自动完成在它没有聚焦时会起作用。
stackblitz 中的行为是正确的，即：我关注输入并显示 3 个选项，如果我写了一些东西，过滤器会按照你的解释正常工作。在我的应用程序中，如果我专注于输入，则选项不会显示，但显然过滤器有效（我尝试放置一些 console.logs 来检查过滤后的数组中的内容，它显示了它应该过滤或不过滤的结果）。无论如何我昨天找到了解决方案，所以我发布它

标签： angular autocomplete angular7

【解决方案1】：

所以问题是我在同一个组件中有两个 mat-autocomplete，如果没有设置所有自动完成（即链接到数据源），Angular 会出现一些问题。我不知道会发生这种情况，我是通过删除第二个偶然发现的。这是我没有把它放在堆栈闪电战中的方式，因为我不知道它甚至可能是一个问题。
我不知道 Github 上是否存在关于此问题的已知问题，或者这是否属于正常行为。
一旦我为另一个自动完成设置了过滤器和 valueChanges 函数，它们都可以正常工作。

【讨论】：