如何让 `material-dropdown-select` 显示当前模型值

Question

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

我在名为 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 同步到下拉列表的默认值。我在这里做错了什么？

提前致谢。

编辑

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

Answer 1

了解小部件如何使用的最佳地点可能是 angular_components_examples。对于 material-dropdown-select 你可以看到例子 here

特别是对于 angular 中的括号语法 [] 只会向下传播值，不会向上传播值。所以如果你想获得一个值的更新，你需要使用括号 ()。或者特殊语法 [()].

由于这是一个表单，我还建议使用 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 添加到您的指令列表中。

如何让 `material-dropdown-select` 显示当前模型值

How to get `material-dropdown-select` to show current model value

dart

angular-dart