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

Question

我需要异步加载 select 的选项( 通过服务)，使用 Angular Material md-select 组件。

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

预期的行为显示在此 link (AngularJs Material )

实际行为显示在这个link .

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

Answer 1

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

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

Here the most simple example of that. 这不是最好的方法……见下文。

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

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

Here is an example using the openChanged event . 我还使该组件整体上更加健壮。

I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. 这需要关闭 View 封装。

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