angular - Material 自动完成面板问题

Question

在我的 Angular 4 项目中，我遇到了 Material 自动完成的问题。当我输入某些内容并且滚动页面时组件会显示建议时，我会看到建议面板与自动完成字段取消链接，如图所示。但在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>

Answer 1

在组件中使用 CdkScrollable。还将其添加到模块文件中的导入中。