Угловая автозаполнение поможет тысячам вариантов - PullRequest
Новая
       23

Угловая автозаполнение поможет тысячам вариантов

0 голосов
/ 01 декабря 2018

Я хочу использовать компонент автозаполнения углового / углового материала для фильтрации тысяч строк.Я вытягиваю массив из примерно 12 тыс. Элементов и хочу отфильтровать элементы, которые могут содержать все строки, которые вводит пользователь, но в любом конкретном порядке.Вот как выглядит мой код компонента: 

import {Component, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
import { DatabaseService } from '../database.service';
import { FormControl } from '@angular/forms';
import {Observable } from 'rxjs';
import {map, startWith} from 'rxjs/operators';


@Component({
  selector: 'app-search-item',
  templateUrl: './search-item.component.html',
  styleUrls: ['./search-item.component.css']
})
export class SearchItemComponent implements OnInit, OnDestroy {
  private selectedItemDescription: string;
  itemFormControl = new FormControl();
  selectedItemNumber: string;
  itemOptions = [];
  setItemOptions: any;
  itemDescriptionMatches: Observable<string[]>;

  constructor(private db: DatabaseService) {

  }

  ngOnInit() {
    console.log('Getting data.');
    this.db.cnxn.openDb('mydb');
    this.db.cnxn.select({
      from: 'items',
    })
      .then((results) => {
        for (const item of results) {
          this.itemOptions.push(item['desc']);
        }
      })
      .catch((error) => {
      });
    this.itemDescriptionMatches = this.itemFormControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toUpperCase().split(' ');
    // return filterValue.filter(el => this.setItemOptions.has(el));
    return this.itemOptions.filter(option => option.includes(filterValue));
    // return this.setItemOptions.has(itemOption => filterValue.map(itemOption.includes));
  }

  ngOnDestroy() {
    this.itemOptions = [];
  }

  closeDialog() {
  }
}

Мои основные вопросы таковы: возможно ли сохранить этот запрос в переменной в документе компонента, куда его нужно запустить только один раз, позадисцены, а затем всякий раз, когда они открывают диалоговое окно, он просто захватывает эту переменную массива и использует ее в качестве параметров для списка автозаполнения, и можно ли ускорить фильтр там, где не требуется столько времени, чтобы загрузитьотфильтрованные результаты, когда пользователь закончил печатать?

Мой шаблон выглядит следующим образом: 

<div>

  <mat-form-field>

    <mat-label>Item Description</mat-label>
    <input matInput type="text" placeholder="Type an item description"
           [matAutocomplete]="auto" [formControl]="itemFormControl" id="itemInput">

  </mat-form-field>

  <mat-autocomplete #auto="matAutocomplete">

    <mat-option *ngFor="let option of itemDescriptionMatches | async" [value]="option" (onSelectionChange)="lookupItemNumber()">
      {{ option }}
    </mat-option>

  </mat-autocomplete>

</div>

Я знаю, что мне нужно реализовать какую-то функцию отладки, чтобы ждать, пока пользователь перестанет набирать определенное количество мс для запуска функцииЯ просто не знаю, как это реализовать.Кроме того, есть ли более быстрый способ фильтрации строк, чем тот метод, который я сейчас использую _filter?

...