Материал Angular 6 - автозаполнение данными с сервера - PullRequest
Новая
       32

Материал Angular 6 - автозаполнение данными с сервера

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

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

Дело в том, что когда вы щелкаете в поле ввода, вы не можете сразу получить результаты.Вы должны ввести что-то в поле ввода, чтобы получить некоторые результаты.

Я разобрал и изменил демонстрацию автозаполнения на Stackblitz , чтобы вы могли видеть, о чем я говорю.В этой демонстрации я фактически не получал данные с сервера.Я просто издевался над ним с помощью setTimeout.Но поведение почти такое же.

HTML: 

<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
    <span>{{ state.name }}</span> |
    <small>Population: {{state.population}}</small>
  </mat-option>
</mat-autocomplete>

TS: 

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';

import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

export class State {
  constructor(public name: string, public population: string, public flag: string) { }
}

@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
  styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample implements OnInit {
  stateCtrl: FormControl;
  filteredStates: Observable<any[]>;

  states: State[];

  constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => state ? this.filterStates(state) : this.states)
      );
  }

  ngOnInit() {
    setTimeout(() => {
      return this.states  = [
    {
      name: 'Arkansas',
      population: '2.978M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
    },
    {
      name: 'California',
      population: '39.14M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
    },
    {
      name: 'Florida',
      population: '20.27M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
    },
    {
      name: 'Texas',
      population: '27.47M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
    }
  ];
    }, 1000);
  }

  filterStates(name: string) {
    return this.states.filter(state =>
      state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

}

PS: я сделал свойпоиски и исследования :) Я нашел результаты, которые в некоторой степени похожи на мой вопрос, но детали совершенно разные, и они НЕ те, что я ищу.Поэтому мне пришлось задать этот вопрос отдельно.

1 Ответ

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

Проблема с filteredStates изначально вы не присваиваете ей никакого значения.Проверьте измененный код ниже: 

constructor() {
    this.stateCtrl = new FormControl();
    this.stateCtrl.valueChanges.subscribe(val => {
      this.filterStates(val);
    });
}

ngOnInit() {
    this.states  = [
        {
          name: 'Arkansas',
          population: '2.978M',
          flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
        },
        {
          name: 'California',
          population: '39.14M',
          flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
        },
        {
          name: 'Florida',
          population: '20.27M',
          flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
        },
        {
          name: 'Texas',
          population: '27.47M',
          flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
        }
    ];
    this.filteredStates = new Observable(observer => {
      setTimeout(() => {
          observer.next(this.states);
      }, 1000);
    });
}

filterStates(name: string) {
    let filteredData = this.states.filter(state =>
    state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
    this.filteredStates = new Observable(observer => {
        observer.next(filteredData);
    }); 
}
...