带有类型的动态材料自动完成选项

Question

我正在尝试使用材料自动完成组件在页面内创建多个表单字段。这些表单字段需要具有预先输入功能，因此我正在材料站点上的示例中添加自定义过滤器。一切都按预期进行，直到我尝试进行自动完成更新，它是基于另一个字段选择的选项。直到我在第一个字段中选择一个选项，前面的类型才能在两个字段中正常工作。完成此操作后，前面的类型过滤将不再在第二个字段中起作用。

从我阅读的内容来看，似乎在选择第一个字段选项之一后更新它的选项时，我可能最终确定了第二个过滤选项的可观察性，这将导致valueChanges可观察性停止触发。 / p>

我还没有看到此类功能的任何示例，似乎在大多数情况下，基于其他字段值的动态选项是在没有类型提前功能的情况下实现的。这样的事情不可能吗？

请参阅下面的堆栈闪电示例。尝试在两个字段中都先输入（它们应该可以很好地过滤）。然后从第一个字段中选择一个选项。尝试在第二个字段中再次输入，它将不再过滤选项。 https://stackblitz.com/edit/angular-lanw1g

Answer 1

第二个字段未过滤值，因为您不会再次映射新值。

您正在ngInit上执行此操作。您也应该在numberSelected方法上做同样的事情。

只需在numberSelected方法中添加以下代码

this.alphaOptions = ['Alpha Two', 'Bravo Two'];

this.filteredAlphaOptions = this.alpha.valueChanges
  .pipe(
    startWith(''),
    map(val => this.filterAlpha(val))
  );

测试here

享受！