Динамическое изменение параметров выбора раскрывающегося списка материалов с помощью окна поиска с событием keyup в AngularDart - PullRequest
Новая
       11

Динамическое изменение параметров выбора раскрывающегося списка материалов с помощью окна поиска с событием keyup в AngularDart

0 голосов
/ 08 февраля 2019

У меня есть выпадающее меню с окном поиска, чтобы выбрать из 1000 вариантов, которые являются иерархическими.Я начинаю показывать топ категории 1, 2, 3 в выпадающем списке.Если вы введете, скажем «1», фильтр, который я внедрил, теперь будет отображать только подкатегории 11, 12, .. из 1.Этот фильтр вызывается с использованием события keyup в material-select-searchbox.Я получаю «Выражение изменилось после того, как оно было проверено».

Я подозреваю, что получаю эту ошибку, потому что я не могу изменить параметры родительского ввода просто так.Я попытался решить проблему, реализовав обработчик событий в родительском компоненте, изменив родительскую переменную (категории StringSelectionOptions в category-selector.dart), которая является входом для поля material-select-search (в Categories-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>

Я хотел бы знать, как я могу изменить параметры материала-выпадающего-выбора из события keyup материала-выбора-поиска.Любые предложения очень ценятся!Спасибо!

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете попробовать material-auto-предлагать-ввод , который был сделан для динамического обновления параметров при вводе значения.

...