Dart 下拉选择(省道角度组件)放弃第二个选择
我有以下示例类:Dart 下拉选择(省道角度组件)放弃第二个选择,dart,angular-dart,Dart,Angular Dart,我有以下示例类: import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import 'package:angular_components/angular_components.dart' show SelectionModel, HasUIDisplayName, Selectable, Sele
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_components/angular_components.dart'
show
SelectionModel,
HasUIDisplayName,
Selectable,
SelectableOption,
StringSelectionOptions,
MaterialDropdownSelectComponent,
MaterialSelectSearchboxComponent,
SelectionChangeRecord,
ItemRenderer,
CachingItemRenderer;
@Component(
selector: 'example-select',
templateUrl: 'example.html',
styleUrls: const [
'example.css'
],
directives: const [
CORE_DIRECTIVES,
formDirectives,
MaterialDropdownSelectComponent,
MaterialSelectSearchboxComponent,
])
class ExampleSelect {
int width = 0;
List<SelectElement> valuesList;
SelectionOptions<SelectElement> _elementListOptions;
StringSelectionOptions<SelectElement> get elementOptions =>
_elementListOptions;
ItemRenderer<SelectElement> get itemRenderer => _itemRenderer;
// Single Selection Model.
final SelectionModel<SelectElement> singleSelectModel =
new SelectionModel.withList(selectedValues: []);
// Label for the button for single selection.
String get singleSelectLabel => singleSelectModel.selectedValues.isNotEmpty
? itemRenderer(singleSelectModel.selectedValues.first)
: 'No Selection';
dynamic get singleSelectedValue => singleSelectModel.selectedValues.isNotEmpty
? singleSelectModel.selectedValues.first.value
: null;
ExampleSelect() {
singleSelectModel.selectionChanges.listen(updateModel);
valuesList = <SelectElement>[
new SelectElement(1, "First"),
new SelectElement(2, "Second"),
new SelectElement(3, 'Third')
];
_elementListOptions = new SelectionOptions<SelectElement>(valuesList);
}
void updateModel(List<SelectionChangeRecord> record) {
print(record);
}
static final ItemRenderer<SelectElement> _itemRenderer =
new CachingItemRenderer<SelectElement>(
(selectElement) => "$selectElement");
}
class SelectElement implements HasUIDisplayName {
final value;
final String label;
const SelectElement(this.value, this.label);
@override
String get uiDisplayName => label;
@override
bool operator ==(Object other) => other is SelectElement && label == label;
@override
int get hashCode => label.hashCode;
@override
String toString() => uiDisplayName;
}
class SelectionOptions<T> extends StringSelectionOptions<T>
implements Selectable {
SelectionOptions(List<T> options)
: super(options, toFilterableString: (T option) => option.toString());
@override
SelectableOption getSelectable(selectElement) =>
selectElement is SelectElement
? SelectableOption.Selectable
: SelectableOption.Disabled;
}
html格式如下:
<material-dropdown-select
[buttonText]="singleSelectLabel"
[selection]="singleSelectModel"
[options]="elementOptions"
[width]="width"
[itemRenderer]="itemRenderer">
</material-dropdown-select>
<br>
Selected: {{singleSelectLabel}}
现在,如果我运行这个示例,选择第一个元素,一切正常,但是当我选择第二个元素时,下拉列表返回到not selected
通过显示以下内容的打印功能恢复此操作:
[SelectionChangeRecord{添加:[First],删除:[]]
[SelectionChangeRecord{添加:[],删除:[第一个]}]
我做错了什么?您的equals方法中有一个错误:
@override
bool operator ==(Object other) => other is SelectElement && label == label;
你看到了吗
应该是
other.label == label
我可能会建议不要重写equals方法,但这就是这里发生的事情。因此,当您选择/取消选择时,小部件正在选择/取消选择所有内容,因为您说它们是相等的。谢谢Ted,很明显。