使用动态搜索框在AngularDart keyup事件改变材料下拉菜单选择选项

Question

我有一个搜索框的下拉菜单约1000选项，这些选项是分层的选择了。我开始显示在下拉顶部类别1，2，3。如果你进入，说“1”的过滤器我实现了现在将显示子类别11，12，只有1 ..。该过滤器上的材料选择，搜索框使用keyup事件被调用。我收到了“后，这是检查表达发生了变化”。

我怀疑，因为我不能修改父输入PARAMS就这样我得到这个错误。我试图解决这个问题实现在父组件的事件处理程序，修改父变量（StringSelectionOptions类别类别-selector.dart），其是输入到该材料选-搜索框（在类别-selector.html） - 但这是行不通的。

我也试图与@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;
}

类别-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';

类别-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;
  }
}

类别-selector.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>

我想知道我怎么能修改材料下拉菜单，选择从材料选择，搜索框的keyup事件的选项。任何建议都非常感谢！谢谢！

Answer 1

你可以尝试已经取得，当你输入一个值来动态更新选项material-auto-suggest-input。