在 AngularDart 中使用带有 keyup 事件的搜索框动态更改材质下拉选择选项

Question

我有一个带有搜索框的下拉菜单，可以从大约 1000 个分层选项中进行选择。我开始在下拉列表中显示顶级类别 1、2、3。如果您输入“1”，我实施的过滤器现在将仅显示 1 的子类别 11、12、..。使用材料选择搜索框上的 keyup 事件调用此过滤器。我收到“检查后表达式已更改”。

我怀疑我收到此错误是因为我无法像那样修改父输入参数。我试图解决在父组件中实现事件处理程序的问题，修改了作为材料选择搜索框（在 categories-selector.html 中）的输入的父变量（StringSelectionOptions 类别在 categories-selector.dart 中） - 但是这不起作用。

我也尝试过摆弄@ViewChild，但是 - 没有正确的结果。

我听说过 StreamController 和 EventBusses，但我不确定如何使用它们来解决我使用库组件（即 MaterialDropdownSelectComponent 和 MaterialSelectSearchboxComponent）的问题。

categories.dart

class Categories {
  static final List<Category> categories = [
   ["1", "", "Category 1"]
   ["2", "", "Category 2"]
   ["11", "1", "Category 11 - Subcategory of 1"]
   ["12", "1", "Category 12 - Subcategory of 1"]
   ["21", "2", "Category 21 - Subcategory of 2"]
   ["22", "2", "Category 22 - Subcategory of 2"]
   //... a thousand more ...
  ].map(
      (c) => Category(c.first, els[1], els.first + " " + els.last)
    ).toList();

  List<Category> filter(String searchterm){
    return categories.where( (nc) => 
      nc.parent == parent ).map((nc) => nc).toList();
   }
} 

class Category implements HasUIDisplayName {
  String code;
  String parent;
  String label;

  Category(this.code, this.parent, this.label);

  @override
  String toString() => label;
}

categories-selector.dart：导入

import 'dart:async';

import 'package:angular/angular.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_select/material_dropdown_select.dart';
import 'package:angular_components/material_select/material_select_searchbox.dart';
import 'package:angular_components/model/selection/string_selection_options.dart';
import 'package:right_scenario_explorer/src/activity_editor/scope_collapse_mixin.dart';
import 'package:right_scenario_explorer/src/company/activity.dart';
import 'package:right_scenario_explorer/src/company/emission.dart';
import 'package:right_scenario_explorer/src/utils/formatter.dart';
import 'package:right_scenario_explorer/src/utils/nace_codes.dart';

categories-selector.dart: 代码

@Component(
  exports: [Formatter, Categories],
  selector: "categories-selector",
  templateUrl: "categories-selector.html",
  directives: [
    coreDirectives,
    MaterialDropdownSelectComponent,
    MaterialSelectSearchboxComponent,
    MaterialButtonComponent,
    MaterialIconComponent,
  ]
)
class CategoriesSelector extends OnInit with {

  @Output()
  Category selectedCategory;

  StringSelectionOptions<Category> categories;

  @override
  void ngOnInit() {
    getCategoryOptions("");
  } 

  void getCategoryOptions(String searchterm) {
    Categories categories = new Categories();
    var selectedOptions = categories.filter(searchterm);
    categoryOptions = StringSelectionOptions(selectedOptions);
  }

  void categorySearchBoxEventHandler(dynamic event){
    getCategoryOptions(event.target.value);
  }

  void updateSelectedCategory(Category category) {
    selectedCategory = category;
  }
}

类别选择器.html

<div>
<material-dropdown-select
    buttonAriaRole="combobox"
    [buttonText]="selectedCategory == null ? 'None' : selectedCategory.toString()"
    [options]="categories"
    (selection)="updateSelectedCategory($event)"
    [listAutoFocus]="false"
    [activateFirstOption]="false"
    <div header>
        <material-select-searchbox
            (keyup)="categorySearchBoxEventHandler"
            label="Search..."
            [filterable]="categories">
        </material-select-searchbox>
    </div>
</material-dropdown-select>
</div>

我想知道如何从 material-select-searchbox 的 keyup 事件中修改 material-dropdown-select 的选项。任何建议都非常感谢！谢谢！

Answer 1

你可以试试material-auto-suggest-input 在您输入值时动态更新选项。