Как использовать угловой материал 6 автозаполнения с сервером данных - PullRequest
Новая
       28

Как использовать угловой материал 6 автозаполнения с сервером данных

0 голосов
/ 02 июня 2018

Я разрабатываю простую страницу с Angular 6 и Material 6. Я хочу восстановить данные из службы, используя автозаполнение Material, но я не знаю, как это сделать хорошо.

Отофициальный пример https://material.angular.io/components/autocomplete/overview Я не понимаю, как использовать сервис для интеграции его с автозаполнением.

Кто-нибудь может мне помочь?

Спасибо

Ответы [ 3 ]

0 голосов
/ 02 июня 2018

хорошо, давайте предположим, что вы возвращаете ваши данные с сервера в виде объектов со структурой, подобной IyourAwesomeData, и для целей данного примера мы будем использовать поле someName для фильтрации данных

, поэтому компонент ur должен выглядеть так:вот так: 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { startWith, debounceTime, map, switchMap, distinctUntilChanged } from 'rxjs/operators';
import { Subscription } from 'rxjs';

interface IyourAwesomeData {
 someName: string; 
 someField: string;
 someOtherField: number;
}

export class YourAutcompleteComponent implements OnInit, OnDestroy {

  dataFiltered: IyourAwesomeData[]; // this data will be used inside HTML Template
  data: Observable<IyourAwesomeData[]>; 
  yourInputCtrl = new FormControl();
  private sub: Subscription;

  constructor() {}

  ngOnInit() {
    this.data = ??? // Pass your data as Observable<IyourAwesomeData[]>;
    this.sub = this.yourInputCtrl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(), 
        startWith(''),
        switchMap((val) => {
          return this.filterData(val || '');
        })
      ).subscribe((filtered) => {
        this.dataFiltered = filtered;
      });
  }

  ngOnDestroy() {
     this.sub.unsubscribe();
  }

  filterData(value: string) {
    return this.data // like IyourAwesomeData[]
      .pipe(
        map((response) => response.filter((singleData: IyourAwesomeData) => {
          return singleData.someName.toLowerCase().includes(value.toLowerCase())
        })),
    );
  }
}

и ваш HTML шаблон должен выглядеть так: 

<mat-form-field>
  <input matInput placeholder="some placeholder" [matAutocomplete]="auto" [formControl]="yourInputCtrl">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let single of dataFiltered" [value]="single.someName">
      {{ single.someName }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
0 голосов
/ 07 июня 2018

Наконец-то я нашел решение, что я хотел сделать!Чтобы связать FormArray с источником данных mat-table, вы должны: Вкратце, пример таков: 

<table mat-table [dataSource]="itemsDataSource">
  <ng-container matColumnDef="itemName">
    <td mat-cell *matCellDef="let element">{{ element.value.material?.name }}</td>
  </ng-container>
  <ng-container matColumnDef="itemCount">
    <td mat-cell *matCellDef="let element">{{ element.value.itemCount }}</td>
  </ng-container>
  <tr mat-row *matRowDef="let row; columns: itemColumns;"></tr>
</table>

и код: 

export class ItemListComponent implements OnInit {
  constructor(
    private fb: FormBuilder
  ) { }
  itemColumns = ['itemName', 'count'];
  itemForm: FormGroup;
  itemsDataSource = new MatTableDataSource();
  get itemsForm() {
    return this.itemForm.get('items') as FormArray;
  }
  newItem() {
    const a = this.fb.group({
      material: new FormControl(), //{ name:string }
      itemCount: new FormControl() // number 
    });
    this.itemsForm.push(a);
    this.itemsDataSource._updateChangeSubscription(); //neccessary to render the mat-table with the new row
  }
  ngOnInit() {
    this.itemForm = this.fb.group({
      items: this.fb.array([])
    });
    this.newItem();
    this.itemsDataSource.data = this.itemsForm.controls;
  }
}
0 голосов
/ 02 июня 2018

Вам просто нужно заполнить options из данных сервера, как только пользователь изменит входное значение. 

<input type="text" matInput (input)="onInputChanged($event.target.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{ option.title }}</mat-option>
</mat-autocomplete>

В вашем файле компонента вам нужно обработать onInputChanged(searchStr) и options. 

onInputChanged(searchStr: string): void {
    this.options = [];
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    this.subscription = this.yourService.getFilteredData(searchStr).subscribe((result) => {
        this.options = result;
      });
    }
...