Angular Material 以异步方式选择加载选项 [英] Angular Material md-select load options in async way
问题描述
我需要异步加载选择的选项(通过服务)，使用 Angular Material md-select 组件.
I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
实际上，我使用 click 事件来加载数据.它有效，但我需要单击两次选择以显示选项.这是一个问题.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
预期行为显示在此链接(AngularJs 材料)
The expected behavior is shown at this link (AngularJs Material)
实际行为显示在此 链接.
md-select 是否支持异步选项的加载?
Is Async options' loading supported by md-select?
推荐答案
需要点击两次的原因是因为第一次点击时，选择控件中没有选项，所以它不会尝试打开面板.然后您的异步方法将选项加载到 DOM 中，并在下次点击时打开.
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
为了解决这个问题，您必须始终在
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
这里最简单的例子. 这不是最好的方法……见下文.
然而，这仍然使用点击事件，这不是最好的方法.如果您将点击事件放在 <mat-select> 上，您可以在某些地方点击控件，但即使下拉面板仍然打开，您的点击事件也不会触发(像浮动标签这样的地方)区域).您可以将点击事件放在 <mat-form-field> 上，但随后会有一些地方您可以点击并触发点击事件，但下拉面板不会打开(像提示/错误文本区域).在这两种情况下，您都失去了键盘支持.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
我建议使用 openChanged 事件而不是点击事件.这也有其自身的怪癖，但它们是可控的.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
这是一个使用 openChanged 事件的示例.我还使组件整体更加健壮.
我还制作了一个版本，它使用占位符元素来显示微调器，而不是使用禁用的垫子选项. 这需要关闭视图封装.
注意:在我的示例中，服务可以根据情况返回不同的数据.为了模拟这一点，我的假服务会跟踪您发送的请求数量，并相应地更改返回的选项.因此，每次打开列表时，我都必须将选项列表设置回空并清除 formControl 的值.我在清除 formControl 之前保存选定的值，以便如果服务返回具有相同项目的列表，我可以自动重新选择该值.如果您只需要加载一次选项，那么您需要稍微修改一下代码以仅在用户第一次打开选择时加载选项.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.
这篇关于Angular Material 以异步方式选择加载选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
