问题
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.
回答1:
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.
来源:https://stackoverflow.com/questions/50914608/how-to-get-material-dropdown-select-to-show-current-model-value