dart - 如何获取 `material-dropdown-select` 以显示当前模型值

Question

使用 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到下拉菜单的默认值。我在这里做错了什么？

提前致谢。

编辑

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

Answer 1

查看小部件如何使用的最佳位置可能是 angular_components_examples。对于 Material 下拉选择，您可以查看示例 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到您的指令列表。