如何获取“材料下拉选择”以显示当前模型值答案

【问题标题】：How to get `material-dropdown-select` to show current model value如何获取“材料下拉选择”以显示当前模型值
【发布时间】：2018-11-27 14:28:29
【问题描述】：

使用 AngularDart + Angular Components

我需要创建一个下拉列表，其中填充了一小部分项目（让它起作用），并自动设置为模型中对象的当前选择（还没有让它起作用）。

我在名为types 的组件中有一个字符串数组。有一个模型对象 (selected)，其字段 (type) 对应于 types 中的列表。

<form class="form">
   //other stuff
   <material-dropdown-select>
     <material-select-item *ngFor="let type of types" [selected] = "selected.type == type">
        {{type}}
     </material-select-item>
   </material-dropdown-select>
</form>

尽管有[selected] 属性，但这不会将当前值selected.type 同步到下拉菜单的默认值。我在这里做错了什么？

提前致谢。

编辑

有趣的是，即使在这种状态下，下拉菜单也无法按预期工作 - 我从下拉菜单中选择了一个值，但没有任何反应。

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

查看小部件如何使用的最佳位置可能是 angular_components_examples。对于material-dropdown-select，您可以查看示例here

特别是对于这个括号语法 [] 角度仅向下传播一个值，而不是向上传播。因此，如果您想获取值的更新，则需要使用括号 ()。或特殊语法 [()]。

由于这是一个表单，我还建议使用 ControlValueAccessor 自动获取表单中的值：

<form class="form">
   //other stuff
   <material-dropdown-select [(ngModel)]="selected.type">
     <material-select-item *ngFor="let type of types" [selected] = "selected.type == type">
        {{type}}
     </material-select-item>
   </material-dropdown-select>
</form>

您还需要将DropdownSelectValueAccessor 添加到您的指令列表中。

【讨论】：