在保留空字符串作为可选搜索参数的默认值的同时显示占位符文本时出现问题

Question

我有一个带有3个不同参数的产品查找，其中2个是可选的。但是，当用户未为两个可选下拉菜单选择一个选项时，服务器将期待空字符串，或者显示我的占位符文本，并且由于声明了变量但从未分配新值，因此它们将作为未定义变量发送到服务器或者，我将打字稿文件中的变量分配为空字符串，但随后我的占位符文本不显示，并且用户界面看起来很空白，空白的选择框也没有显示。

带有以下占位符的html文件示例

<ng-select placeholder="{{'Select manufacturer' | translate}}" [(ngModel)]="selectedPbeManufacturer" [items]="searchPbeManufacturers" [clearable]="false" [disabled]="isLoading" Default dropdownPosition="bottom"></ng-select>
<ng-select placeholder="{{'Select category' | translate}}" [(ngModel)]="selectedPbeFirstCategory" [items]="searchPbeFirstCategories" [clearable]="false" (change)="populatePbeSecondCategory()" Default [disabled]="isLoading" dropdownPosition="bottom"></ng-select>
<ng-select placeholder="{{'Select sub-category' | translate}}" [(ngModel)]="selectedPbeSecondCategory" [items]="searchPbeSecondCategories" [clearable]="false" (change)="searchPbeIfDesktop()" Default [disabled]="isLoading || !selectedPbeFirstCategory" dropdownPosition="bottom"></ng-select>

下面是在我的打字稿中声明变量的两种不同方式。第一个允许占位符正确显示，但如果未选择任何内容，则将未定义的占位符发送到服务器。第二个命令正确发送了一个空字符串或用户的选择，但用一个空字符串覆盖了占位符。

selectedPbeFirstCategory;
selectedPbeSecondCategory;

selectedPbeFirstCategory = "";
selectedPbeSecondCategory = "";