Angular搜索栏获API数据却显示空白但占空间的问题排查

我正在Angular中开发搜索功能，当前遇到异常：已确认API返回了数据，但搜索栏显示空白却仍占用对应数据的空间。以下是相关代码及UI截图，请求排查可能的问题：

<div class="custom_modal">
<h3 mat-dialog-title>Service Code</h3>
<div mat-dialog-content >
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12">
                    <mat-form-field class="example-full-width">
                        <mat-select placeholder="Service Code" (selectionChange)="onServiceCodeSelection($event)" matInput [ngClass]="{ 'is-invalid': submitted && formControls.serviceCode.errors }" required>
                            <ngx-mat-select-search placeholderLabel="Search" noEntriesFoundLabel="no match found" [formControl]="websiteMultiFilterCtrl1" ngDefaultControl>
                            </ngx-mat-select-search>
                            <mat-option *ngFor="let option of masterServiceCode" [value]="option">
                                {{ option.value }}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="formControls.serviceCode.errors"> Please select service code </mat-error>
                    </mat-form-field>
                </div>
            </div>
        </div>
    </div>
</div>

<div mat-dialog-actions>
    <button mat-raised-button color="warn" class="rounded px-1" (click)="closeDialog('close')">Close</button>
    <button mat-raised-button color="primary" class="rounded px-1" (click)="onAddServiceCode()">Add</button>
</div>
</div>

可能的排查方向 #

• 数据字段不匹配：检查API返回的masterServiceCode数组结构，确认每个元素都存在value字段。如果实际字段是code、serviceCode等其他名称，模板中{{ option.value }}会显示为空，导致选项空白但占位。
• 过滤逻辑未生效：ngx-mat-select-search的websiteMultiFilterCtrl1未正确关联过滤逻辑。需要在组件中订阅该控件的value变化，对masterServiceCode进行过滤，并将过滤后的数组绑定到*ngFor的数据源（比如用一个filteredOptions变量），否则下拉列表可能显示的是未过滤的空数组。
• 样式覆盖导致文字不可见：通过浏览器开发者工具检查mat-option元素的样式，确认文字颜色是否与背景色一致（比如白色文字在白色背景）。自定义样式（如custom_modal）可能覆盖了Material的默认样式，导致文字隐藏。
• 变更检测未触发：API返回数据后，若直接修改原masterServiceCode数组（比如push元素），Angular可能未检测到变化。需使用新数组引用赋值（this.masterServiceCode = [...responseData]），或手动调用ChangeDetectorRef.detectChanges()。
• 组件配置问题：确认NgxMatSelectSearchModule已正确导入到模块中，websiteMultiFilterCtrl1已在组件中初始化（websiteMultiFilterCtrl1 = new FormControl('')），且组件版本与Angular Material版本兼容。

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