Angular Dart material 下拉菜单 select 中的选择给出错误

Question

我有一个带有 material 下拉列表 select 的组件，当 [(selection)] 的类型为 SingleSelectionModel 时，我得到了一个错误 "angular dart Expected a value of type 'SingleSelectionModel', but got one of type 'Term'"。当它是 Term 类型时就没问题。我需要 SingleSelectionModel 来访问其更改流并使用 selected 值进行一些操作。

我有 Dart 2.2.0，angular：^5.2.0，angular_components：^0.11.0。

任何人都可以帮助如何将 SingleSelectionModel 用于 [(selection)] 吗？

@Component(
  selector: 'x-plan-edit-rule',
  template: '''
    <material-dropdown-select
        [options]="terms"
        [(selection)]="selectedTerm"
        [buttonText]="buttonText">
    </material-dropdown-select>
  ''',
  directives: const [
    coreDirectives,
    MaterialButtonComponent,
    MaterialDropdownSelectComponent,
  ],
)
class EditPlanRuleComponent implements OnInit {

  @Input() Rule rule;
  SelectionOptions<Term> terms;
  SingleSelectionModel<Term> selectedTerm = SelectionModel<Term>.single(); // GIVES ERROR
  //Term selectedTerm; // WORKS FINE WITHOUT ERROR

  EditPlanRuleComponent();

  @override
  ngOnInit() {
    // List<Term> rule.availableTerms
    terms = SelectionOptions.fromList(rule.availableTerms);
    selectedTerm?.selectionChanges?.listen((_) {
      // do some checks after the selection change
    });
  }


  String get buttonText =>  'Some button text';
}

Answer 1

终于找到解决方法

我已将模板绑定 [()] 拆分为 [] 和 ()，因此模板是

  template: '''
    <material-dropdown-select
        [options]="terms"
        [selection]="selectedTerm"
        (selectionChange)="validateTerm($event)"
        [buttonText]="buttonText">
    </material-dropdown-select>
  ''',

在 Dart 文件中，我有一个方法 validateTerm(Term term)，它执行一些验证检查并将选定的术语分配给 selectedTerm。所以我不需要监视选择更改流。

 Term selectedTerm;

 void validateTerm(Term term) {
    // do some validations...
    selectedTerm = term;
  }

Angular Dart material 下拉菜单 select 中的选择给出错误

Selection in Angular Dart material dropdown select gives error

dart

angular-dart