Угловая 5+ Материал Автозаполнение с неправильной позиции - PullRequest
Новая
       15

Угловая 5+ Материал Автозаполнение с неправильной позиции

0 голосов
/ 05 июля 2018

Я пытаюсь выполнить пример , предоставленный на веб-сайте угловых материалов для автозаполнения, и когда я внедряю его в приложение, параметры появляются где-то еще, а не под вводом, как показано enter image description here

В настоящее время у меня есть следующий код в html файле 

<form class="example-form">
    <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 class="example-option-img" aria-hidden [src]="state.flag" 
            height="25">
          <span>{{state.name}}</span> |
          <small>Population: {{state.population}}</small>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
</form>

и это то, что у меня есть в файле component.ts 

import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

  stateCtrl = new FormControl();
  filteredStates: Observable < State[] >;

  states: State[] = [
    {
      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'
    }
  ];

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

  private _filterStates(value: string): State[] {
    const filterValue = value.toLowerCase();
    return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
}

и в моем app.module.ts у меня есть formsmodule и реактивный модуль формы внутри импорта.

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

Забыл добавить, что этот дочерний компонент (автозаполнение) вызывается родительским компонентом следующим образом. 

<div>
...
  <app-menu></app-menu>
...
</div>

1 Ответ

0 голосов
/ 05 июля 2018

Исправлено, мне не хватало prebuilt-темы, предоставленной угловым материалом. если у кого-то такая же проблема, просто добавьте 

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

to styles.css

...