如何在角镖中使用material-dropdown-select

时间:2017-05-28 18:08:07

标签: angular dart material-design angular-material

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

我所拥有的是一个包含当前所选项目的变量和一个包含所有可能项目的列表。我设法做的是显示下拉组件并填写可用的项目。

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

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

1 个答案:

答案 0 :(得分:1)

来自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>

您也可以使用模型类,这样可以提供更大的灵活性:

<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>

如果有帮助,请告诉我!