Проблема с панелью автозаполнения материалов

В моем проекте angular 4 у меня проблема с автозаполнением материалов. Когда я что-то набираю, и компонент показывает предложения, если я прокручиваю страницу, я вижу панель предложений, не связанную с полем автозаполнения, как вы видите на картинке. Но в Material-Autocomplete у меня нет этой проблемы.

Это мой код:

<mat-form-field>
        <input matInput placeholder="{{'customer.detail.labels.country'
          | translate }}" required [matAutocomplete]="tdAuto" name="country" #country="ngModel" [(ngModel)]="selected.country"
          (ngModelChange)="searchCountry($event)"> </mat-form-field>
            <mat-autocomplete #tdAuto="matAutocomplete" [displayWith]="displayFn">
            <mat-option (onSelectionChange)="setCountry(country)" *ngFor="let country of countries" [value]="country">
                <div class="row">
                  <img src="assets/img/flags24/{{country.alpha2Code | lowercase}}.png" />
                    <span>{{country.name}} ({{country.alpha2Code}})</span>
                </div>
            </mat-option>
        </mat-autocomplete>

введите здесь описание изображения


person Alessandro Celeghin    schedule 08.01.2018    source источник
comment
<mat-form-field> должен быть вокруг всего автозаполнения, а не только ввода. Хотя не уверен, что это исправит   -  person Shadowlauch    schedule 08.01.2018
comment
@Shadowlauch, к сожалению, нет.   -  person Alessandro Celeghin    schedule 08.01.2018
comment
@Alessandro Не могли бы вы указать, какую версию углового материала вы используете?   -  person The.Bear    schedule 09.01.2018
comment
@The.Bear да, извините, я использую @angular/material: ^2.0.0-beta.12 и angular 4.4.4   -  person Alessandro Celeghin    schedule 09.01.2018
comment
это все еще происходит в новейшей версии angular/material, происходит то, что события прокрутки никогда не привязываются к оверлею контейнера - также этого не происходит, если компонент не вложен в макет   -  person iamwhitebox    schedule 12.06.2018


Ответы (1)


Используйте CdkScrollable в своем компоненте. Также добавьте его в импорт в файле вашего модуля.

person JanakaRao    schedule 03.02.2020