如何获取“材料-下拉-选择"以显示当前模型值 [英] How to get `material-dropdown-select` to show current model value

问题描述

使用AngularDart + 角度组件

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

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

 < form class ="form">//其他的东西< material-dropdown-select>< material-select-item * ngFor =让类型的类型" [selected] ="selected.type == type">{{类型}}</material-select-item></material-dropdown-select></form> 

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

谢谢.

编辑

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

解决方案

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

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

Using AngularDart + Angular Components

I need to create a dropdown that is populated with a small list of items (got this to work), and gets automatically set to the current selection for an object in the model (haven't got this to work).

I have an array of strings in the component called types. There is a model object (selected) whose field (type) corresponds to the list in 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>

Despite the [selected] attribute, this doesn't sync the current value selected.type to the dropdown's default value. What am I doing wrong here?

Thanks in advance.

EDIT

Interestinglt even in this state the dropdown doesn't work as expected - i select a value from the dropdown and nothing happens.

解决方案

The best place to see how widgets are used is probably going to be the angular_components_examples. For material-dropdown-select you can see the see the examples here

In particular for this bracket syntax [] in angular only propagates a value down, not up. So if you want to get an update on a value you would need to use parenthesis (). Or the special syntax [()].

Since this is a form I'd also suggest using the ControlValueAccessor to get the value in the form automatically:

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

you'll also need to add DropdownSelectValueAccessor to your directives list.

这篇关于如何获取“材料-下拉-选择"以显示当前模型值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！