mat-autocomplete 不显示选项 Angular

Question

我正在尝试在 Angular 8 应用程序中实现材质自动完成器，但未显示选项。

如您所见，我已经尝试按照 Angular mat-autocomplete not shown options

中的建议应用 z-index: 9999

filteredData 中存在选项：Observable;

HTML 看起来像这样：

<div class="col-md-offset-6 col-md-6 col-lg-offset-6 col-lg-6 col-xs-offset-6 col-xs-6 col-sm-offset-6 col-sm-6 ">
    <mat-form-field class="full-width search-header-input">
        <input matInput [formControl]="myControl" placeholder="{{ 'search-text' | translate }}" [matAutocomplete]="auto">
        <mat-autocomplete style="z-index: 9999 !important; position: relative" autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onSelected($event)">
            <mat-option *ngFor="let item of filteredData | async" [value]="item">
                {{ item }}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</div>

我正在记录用于填充filteredData的API调用的结果，它确实有：

ngOnInit() {
        this.filteredData = this.strABuscar.valueChanges.pipe(
            startWith(''),
            tap(value => console.log('Input value:', value)),
            switchMap(value => this.customData ? this.customData.searchWithReturn(value) : []),
            tap(options => {
                console.log('Filtered options:', options);
                //this.cdr.detectChanges();
                this.cdr.markForCheck();
            })
        );
    }

我还添加了一个跨度，看起来数据没问题：

{{项目}}

有人能指出问题所在吗？

提前致谢

Answer 1

自动完成 CSS 不适用于下拉列表，因为它在应用程序的根目录中呈现。所以你需要添加一些自定义CSS。

尝试将

z-index

添加到自动完成的叠加层中，也许可以解决问题。

您需要将此 CSS 添加到 global-styles.scss 文件中，而不是在组件级别。

.cdk-overlay-pane {
    z-index: 3000 !important; // give more if needed!
}