Angular CDK Overlay在MatAutocomplete及基础示例中无法显示问题

问题现象 #

尝试实现MatAutocomplete功能，但下拉框始终无法正常显示，仅偶然出现一次且无法复现；参照Overlay基础示例调整后问题依旧。

相关代码 #

styles.scss

@import '../../../node_modules/@angular/material/prebuilt-themes/cyan-orange.css'; 
@import "../../../node_modules/@angular/cdk/overlay-prebuilt.css";

模板代码

<mat-form-field appearance="outline" class="w-100">
    <mat-label i18n>Tags</mat-label>
    <mat-chip-grid #tagsChipList>
        @for (tag of tagsSignal(); track tag.id) {
            <mat-chip-row
              matChipRemove
              [removable]="true"
              (removed)="onRemoveTag(tag)"
            >
              {{ tag.name }}
              <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
                  <mat-icon>cancel</mat-icon>
              </button>
           </mat-chip-row>
       }
    <input
      #tagInput
      name="close-outline"
      [matChipInputFor]="tagsChipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matAutocomplete]="autocompleteTags"
      [(ngModel)]="currentTag"
      (matChipInputTokenEnd)="onAddTagInput()"
      />
  </mat-chip-grid>
  <mat-autocomplete
    class="autocomplete cdk-overlay-container"
    #autocompleteTags="matAutocomplete"
    (optionSelected)="onAddTag($event)"
   >
    @for (tag of filteredTags(); track tag.id) {
        <mat-option [value]="tag.id">
          {{ tag.name }}
        </mat-option>
    }
    </mat-autocomplete>
</mat-form-field>

调试截图 #

排查与解决建议 #

• 移除错误容器类：mat-autocomplete上的cdk-overlay-container是CDK内部专用容器类，手动添加会破坏浮层渲染逻辑，直接删除该类。
• 确认数据有效性：检查filteredTags()信号是否返回非空数组，可在模板中临时添加{{ filteredTags() | json }}查看实时数据，确保输入内容能触发过滤逻辑生成匹配项。
• 验证模块导入：确保当前组件所在模块已导入MatAutocompleteModule、MatChipsModule、OverlayModule以及FormsModule（因使用了ngModel）。
• 检查样式冲突：通过浏览器开发者工具查看mat-autocomplete元素样式，确认未被自定义CSS设置为display: none或visibility: hidden；同时确认Material主题和Overlay样式的导入路径与项目结构匹配。
• 校验绑定逻辑：确保currentTag的类型与mat-option的value类型一致，输入时能正确触发过滤方法更新filteredTags。

内容的提问来源于stack exchange，提问作者dinirichard