Question

我有以下示例类：

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

现在，如果我运行这个例子，并选择第一个元素，一切正常，但是当我选择＆＃34; Second＆＃34;元素，下拉列表返回未选中。

通过显示以下内容的打印功能恢复此操作：

[SelectionChangeRecord{added: [First], removed: []}]
[SelectionChangeRecord{added: [], removed: [First]}]

我做错了什么？

Answer 1

你的equals方法有错误：

@override
bool operator ==(Object other) => other is SelectElement && label == label;

你看到了吗？

应该是

other.label == label

我可能建议不要覆盖equals方法，但这就是这里发生的事情。因此，当您选择/取消选择小部件时，正在选择/取消选择所有内容，因为您说它们是相同的。

下拉选择（Dart Angular Components）会丢弃第二个选择

1 个答案: