Question

我需要创建一个下拉列表，其中填充了一小部分项目（使其生效），并自动设置为模型中对象的当前选择（没有使其工作）。 / p>

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

提前致谢。

修改

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

Answer 1

了解如何使用小部件的最佳位置可能是angular_components_examples。对于材料下拉选择，您可以参见示例here

特别是对于此括号，[angle]中的语法[]仅向下传播一个值，而不向上传播。因此，如果要更新某个值，则需要使用括号（）。或特殊语法[（）]。

由于这是一种表单，我也建议您使用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`来显示当前的模型值

1 个答案: