Автозаполнение углового материала не показывает опции списка - PullRequest
Новая
       16

Автозаполнение углового материала не показывает опции списка

0 голосов
/ 23 мая 2019

В моем Angular 5.1.1 я пытаюсь добавить компонент автозаполнения. Раньше я использовал компоненты Angular Material, поэтому следовал их документации. Я включил необходимый импорт, машинописный код и HTML-код. Но когда я фокусируюсь на вводе, ничего не происходит, список не отображается.

Я добавил к необходимым импортам, таким как ReactiveFormsModule, MatAutocompleteModule, MatFormFieldModule, MatInputModule.

Я тоже попробовал то же самое в приложении Angular 7, и там он отлично работает.

component.html 

<mat-form-field>
        <input type="text" placeholder="Select company" matInput [formControl]="myControl" [matAutocomplete]="auto">
      </mat-form-field>

      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of testCompanies" [value]="option">
          {{ option }}
        </mat-option>
      </mat-autocomplete>

component.ts 

export class EditModalContent /* implements OnInit */ {
testCompanies: string[] = ["One", "Two", "Three", "Four"];
myControl = new FormControl();
filteredOptions: Observable<string[]>;

constructor(public activeModal: NgbActiveModal) {}

В DOM я не вижу каких-либо опций, добавленных в mat-autocomplete, и кажется, что размер равен 0x0.

enter image description here

enter image description here

EDIT

После поиска в DOM и сравнения с примером Angular-Materials я обнаружил, что он показан в контейнере cdk-overlay-container. Проблема сейчас в том, что я пытаюсь показать это в модале, поэтому оно отображается на заднем плане. Но это определенно есть!

Я пытался играть с z-index, но он не работает.

Кто-нибудь как идея?

...