Угловой (2) поиск материалов с асинхронной фильтрацией - PullRequest
Новая
       9

Угловой (2) поиск материалов с асинхронной фильтрацией

0 голосов
/ 29 октября 2018

Спасибо за вашу помощь заранее.

Так что я застрял, пытаясь понять это, и мне нужно сделать это в ближайшее время, иначе мой начальник получит мою голову.

**

Введение

** Я использую автозаполнение Angular Material в нашем приложении Angular 6, см. Документы ниже https://material.angular.io/components/autocomplete/overview

**

Что я пытаюсь сделать:

Так что в настоящее время я фильтрую список результатов поиска на основе строкового значения, поэтому, например, у меня есть ngFor, который получает список строк, таких как «имя продукта 1», «имя продукта 2» и т. Д. Он фильтрует через список элементов без проблем и объединяет только те значения, которые мы ввели. Но мне нужно отфильтровать эти имена на основе строки ключевых слов.

Так, например, «имя продукта 1» - это имя, а его ключевые слова - «справочная служба активного каталога продукта один продукт», если ключевые слова содержат какую-либо часть строки, то в этом примере мне нужно отобразить только название продукта » название продукта 1 "на основе этих ключевых слов. (Надеюсь, это имеет смысл, код ниже)

products.component.ts 

  ngOnInit() {

    // proudct is an input field shown below
      this.filteredProducts = this._form1.controls['product'].valueChanges
      .pipe(
        startWith<string | Product>(''),
        map(value => typeof value === 'string' ? value : value.name),
        map(name => name ? this._filter(name) : this.products.slice())
      );

  }

  // Display the result in the dropdown list
  displayFn(product?: Product): string | undefined {
    return product ? product.name : undefined;
  }

  // Filter through the list of items
  private _filter(name: string): Product[] {
    if(name) {

      const filterValue = name.toLowerCase();

      return this.products.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
    }
  }

product.componenet.html 

<form [formGroup]="_form1" (ngSubmit)="_onFirstSubmit()" class="step-container">

    <mat-form-field class="mat-full-width-container">
      <input type="text" placeholder="Product or service name" aria-label="product" matInput formControlName="product" [matAutocomplete]="auto" (input)="prodChanged()" (blur)="selectProduct()">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
          {{ product.name }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

</form>

Пожалуйста, помогите Я попробовал пару вещей, которые, кажется, не могут получить это, спасибо

...