promise - Angular Material md-select 异步加载选项

Question

我需要使用 Angular Materialmd-select组件异步加载选择的选项（通过服务）。

实际上，我使用click事件来加载数据。它有效，但我需要单击两次选择以显示选项。这是一个问题。

此链接显示了预期的行为（AngularJs Material）

实际行为显示在此链接中。

是否支持异步选项的加载md-select？

Answer 1

您需要单击两次的原因是，当您第一次单击时，选择控件中没有任何选项，因此它不会尝试打开面板。然后，您的 async 方法将选项加载到 DOM 中，并在下一次单击时打开。

为了解决这个问题，您必须始终<mat-option>在您的<mat-select>. 例如，您可以添加一个<mat-option>显示<mat-spinner>数据正在加载的禁用。

这是最简单的例子。 这不是最好的方法......见下文。

但是，这仍然使用不是最佳方法的点击事件。如果您将点击事件放在<mat-select>您可以点击控件的位置，但即使下拉面板仍然打开（浮动标签区域等位置），您的点击事件也不会触发。您可以将点击事件放在上面，<mat-form-field>但是会有一些地方可以点击并触发点击事件，但下拉面板不会打开（提示/错误文本区域之类的地方）。在这两种情况下，您都会失去键盘支持。

我建议使用<mat-select> openChanged事件而不是点击事件。这也有其自身的怪癖，但它们是可控的。

这是一个使用 openChanged 事件的示例。我还使组件整体上更加健壮。

我还制作了一个版本，它使用占位符元素来显示微调器，而不是使用禁用的垫选项。 这需要关闭视图封装。

注意：在我的示例中，服务可以根据情况返回不同的数据。为了模拟这一点，我的虚假服务会跟踪您发送的请求数量，并相应地更改返回的选项。formControl因此，每次打开列表时，我都必须将选项列表设置回空并清除' 值。我在清除之前保存选定的值，formControl这样如果服务返回具有相同项目的列表，我可以自动重新选择该值。如果您只需要加载一次选项，那么您需要稍微修改代码以仅在用户第一次打开选择时加载选项。