如何在角度飞镖中使用材料下拉选择 [英] How to use material-dropdown-select in angular dart

问题描述

我正在寻找如何使用 material-dropdown-select 组件的示例.

I am looking for a sample how to use the material-dropdown-select component.

我拥有的是一个变量，用于保存当前选定的项目和一个包含所有可能项目的列表.我设法做的是显示下拉组件并填充可用项目.

What I have is a variable holding the currently selected item and a list with all possible items. What I managed to do is to display the dropdown component and fill the available items.

  <material-dropdown-select>
    <material-select-item *ngFor="let item of allItems">
      {{item.name}}
    </material-select-item>
  </material-dropdown-select>

我没有管理的是自动标记当前选择的项目并添加事件处理程序来更新选择.在这种情况下，有必要不更新变量本身，而是运行一个方法，在我的情况下触发 redux 状态转换.

What I did not manage is to automatically mark the currently selected item and to add an event handler to update the selection. In that case it would be necessary to not update the variable itself but to run a method which in my case triggers a redux state transition.

推荐答案

来自 angular_components_example:

<material-select width="2" class="bordered-list">
  <material-select-item *ngFor="let p of ['FTP', 'HTTP', 'HTTPS']"
                        (trigger)="protocol = p"
                        [selected]="protocol == p">
    {{ p }}
  </material-select-item>
</material-select>

您也可以使用 model 类代替，这提供了更大的灵活性:

You could also use a model class instead, which gives more flexibility:

<material-select [selection]="targetLanguageSelection" class="bordered-list">
  <material-select-item *ngFor="let language of languages"
                        [value]="language"
                        displayNameRenderer
                        useCheckMarks="true">
  </material-select-item>
</material-select>

如果有帮助，请告诉我！

Let me know if that helps!

这篇关于如何在角度飞镖中使用材料下拉选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！