Question

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

我怀疑我收到此错误，因为我无法像这样修改父输入参数。我试图解决在父组件中实现事件处理程序，修改父变量（category-selector.dart中的StringSelectionOptions类别）的问题，该父变量是material-select-searchbox（在categorys-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;
}

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

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

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

Answer 1

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

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

1 个答案: