Как использовать материал-авто-предложение-ввод с данными, полученными Firebase Firestore - PullRequest
Новая
       23

Как использовать материал-авто-предложение-ввод с данными, полученными Firebase Firestore

0 голосов
/ 04 мая 2019

Я хотел бы отобразить предложения (названия песен), которые получены запросом пожарного депо, на основе ввода пользователя из поля ввода поиска.

Поле ввода, в которое пользователь вводит условие поискаявляется материалом-автоматическим предложением-вводом компонентами дизайна материалов для AngularDart ( angular_components ).

Однако моя проблема заключается в том, что я не знаю, какчтобы правильно «преобразовать» полученный запрос Firestore, чтобы результаты подсказок отображались в поле ввода.

Я попытался применить свой код аналогично поисковому компоненту в руководстве по AngularDart 'Tourof Heroes '.

После многочисленных поисков в Google и GitHub я решил использовать StringSelectionOptions, чтобы сообщить авто-предложению-вводу об использовании названия песни и предоставить возвращенный поток (приведенный в виде списка).

Тем не менее, я не совсем уверен, является ли мой подход приведения Stream к List<Song> правильным путем, так как он выглядит довольно hacky ...

Код AngularDart (search_component.dart): 

class SearchComponent implements OnInit {
FirebaseService _firebaseService;

StreamController<String> _searchTerm = StreamController<String>.broadcast();

SelectionModel<Song> songSelection = SelectionModel.single();
StringSelectionOptions<Song> songOptions;

SearchComponent(this._firebaseService);

void ngOnInit() async {

    // receive results from firestore query
    var foundSongs = _searchTerm.stream
        .transform(debounce(Duration(milliseconds: 300)))
        .distinct()
        .transform(switchMap((term) => term.isEmpty
          ? [] as List<Song>
          : _firebaseService.findSong(term))
    );

    var foundSongsList = await (foundSongs.toList());

    // insert results as suggest options
    songOptions = StringSelectionOptions<Song>(
        foundSongsList, toFilterableString: (Song song) => song.title);
}

void search(String term) => _searchTerm.add(term);

HTML-код компонента поиска (search_component.html) 

<material-auto-suggest-input #searchInput
        label='Search...'
        trailingGlyph="search"
        [selectionOptions]='songSelection'
        (change)="search(searchInput.inputText)">

В настоящее время я получаю NoSuchMethodError: invalid member on null: 'optionsList' в консоли разработчика и нет рабочего авто-ввода-ввода ...

Что я делаю не так?Может ли кто-нибудь направить меня в правильном направлении?К сожалению, я не нашел пример того, как объединить Firebase Firestore и material-auto-предложить-input .

...