我需要异步加载选择的选项（
通过服务），使用 Angular Materialmd-select成分。
事实上，我用的是click加载数据的事件。它有效，但我需要单击选择两次才能显示选项。这是一个问题。
预期的行为如下所示link https://codepen.io/theShadow89/pen/OOVXWw（AngularJs 材料）
实际行为如下所示link https://stackblitz.com/edit/angular-material2-select-load-values-async?file=app/food.service.ts.
是否支持异步选项加载md-select?
您需要单击两次的原因是因为当您第一次单击时，选择控件中没有选项，因此它不会尝试打开面板。然后，您的异步方法将选项加载到 DOM 中，下次单击时它将打开。
为了解决这个问题，您必须始终包含至少一个<mat-option>在你的<mat-select>。您可以添加禁用的<mat-option> with a <mat-spinner>例如，显示数据正在加载。
这是最简单的例子。 https://stackblitz.com/edit/angular-mat-select-deferred-loading-simple?file=app%2Fselect-deferred-example.ts 这不是最好的方法......见下文。
但是，这仍然使用点击事件，这不是最好的方法。如果你把点击事件放在<mat-select>在某些地方，您可以单击控件，但即使下拉面板仍然打开，您的单击事件也不会触发（例如浮动标签区域）。您可以将点击事件放在<mat-form-field>但随后会有一些地方可以单击并触发单击事件，但下拉面板不会打开（例如提示/错误文本区域）。在这两种情况下，您都会失去键盘支持。
我建议使用<mat-select> openChanged事件而不是点击事件。这也有其自身的怪癖，但它们是可以管理的。
这是使用 openChanged 事件的示例 https://stackblitz.com/edit/angular-mat-select-deferred-loading?file=app%2Fselect-deferred-example.ts. 我还使该组件整体更加强大。
我还制作了一个使用占位符元素来显示微调器的版本，而不是使用禁用的垫选项。 https://stackblitz.com/edit/angular-mat-select-deferred-loading-spinner-placeholder?file=app%2Fselect-deferred-example.ts 这需要关闭视图封装。
Note:在我的示例中，该服务可以根据情况返回不同的数据。为了模拟这一点，我的假服务会跟踪您发送的请求数量并相应地更改返回的选项。所以我必须将选项列表设置回空并清除formControl每次打开列表时的值。我在清除之前保存所选值formControl这样，如果服务返回包含相同项目的列表，我可以自动重新选择该值。如果您只需要加载选项一次，那么您需要稍微修改一下代码，以便仅在用户第一次打开选择时加载选项。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
