Angular Typhead空值应重置另一个选择对象的选项

我在页面中有一个打印头，用于加载客户帐户的用户。 在我点击“打印结果”中的一个项目后，用户会加载到下一个选择框，但在我提交之前，我会从“打印结果”中删除该选项，清除该选项，然后对另一个仍然显示错误结果的选择框进行模糊处理

在检测到字体值为空后，在哪里可以删除该框的选项

这里是HTML，下面是我觉得相关的代码

顺便说一句，我并不像你们想象的那个样擅长棱角

<div class="form-group">
    <label class="control-label">{{ "ASSUME_IDENTITY.LABELS.CUSTOMER" | translate }}</label>
    <div>
        <ng-template #rt let-r="result" let-t="term">
            {{ r.fullPath }}
        </ng-template>

        <input id="typeahead-format" name="nodeFullPath" type="text" mdbActive [ngClass]="{'invalid': validNode, 'valid': validNode}"
         class="form-control" #el (focus)="onFocus($event)" (selectItem)="selectItem($event)" (blur)="onBlurMethod(selectedNode)"
         [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" />

    </div>
</div>
<div class="form-group">
    <label class="control-label">{{ "ASSUME_IDENTITY.LABELS.USER" | translate }}</label>
    <div>
        <select class="form-control" [(ngModel)]="selectedUser" name="selectedUser" [disabled]="!(usersLoaded | async)">
            <option *ngFor="let user of (usersForNode | async)" [ngValue]="user"> {{user.label | translate}}</option>
        </select>
    </div>
</div>
<div>
    <button type="button" [disabled]="!(usersLoaded | async)" class=" btn btn-primary pull-right" (click)="assumeIdbuttonPressed()">
        {{ "ASSUME_IDENTITY.BTN_ASSUME_IDENTITY" | translate }}</button>
</div>

{{“假定_IDENTITY.LABELS.CUSTOMER”{翻译}
{{r.fullPath}
{{“假定_IDENTITY.LABELS.USER”{翻译}
{{user.label | translate}}
{{“假定(u IDENTITY.BTN)假定(u IDENTITY | translate}}

setSelectedUserToFirstItem(user: HttpOption) {
    this.selectedUser = user;
}

onFocus(e: Event): void {
    e.stopPropagation();
    setTimeout(() => {
    const inputEvent: Event = new Event('input');
    e.target.dispatchEvent(inputEvent);
}, 0);
}

search = (text: Observable<string>): Observable<CustomerNodePath[]> =>
    text
        .debounceTime(100)
        .distinctUntilChanged()
        .map((term: any) => this.fullPathList.filter(v => v.fullPath.toLowerCase().indexOf(term.toLowerCase()) > -1))

formatter = (x: { fullPath: string }): string => x.fullPath;

selectItem = (event: any) => {
    this.selectedNode = event.item;
    this.store.dispatch(new GetUsersForNode(this.selectedNode.id));
}

onBlurMethod = (node: CustomerNodePath): void => {
    if (!this.selectedNode) this.dispatchNodeValidationError();
}

private dispatchNodeValidationError = (): void => {
    this.store.dispatch(new NodeValidationError());
}

setSelectedUserToFirstItem（用户：HttpOption）{
this.selectedUser=user；
}
onFocus（e：事件）：无效{
e、 停止传播（）；
设置超时（（）=>{
常量输入事件：事件=新事件（“输入”）；
e、 target.dispatchEvent（inputEvent）；
}, 0);
}
搜索=（文本：可观察）：可观察=>
文本
.debounceTime（100）
.distinctUntilChanged（）
.map（（term:any）=>this.fullPathList.filter（v=>v.fullPath.toLowerCase（）.indexOf（term.toLowerCase（））>-1））
格式化程序=（x:{fullPath:string}）：string=>x.fullPath；
selectItem=（事件：任意）=>{
this.selectedNode=event.item；
this.store.dispatch（新的GetUsersForNode（this.selectedNode.id））；
}
onBlurMethod=（节点：CustomerNodePath）：void=>{
如果（！this.selectedNode）this.dispatchNodeValidationError（）；
}
private dispatchNodeValidationError=（）：void=>{
this.store.dispatch（new NodeValidationError（））；
}

这是我们的解决方案：

把这个放在部件里

 onBlurMethod = ( event: any, node: CustomerNodePath): void => {
        if (event.target.value === "") this.store.dispatch(new ClearUsers())
        if (!this.selectedNode) this.dispatchNodeValidationError()
    }

正如您所看到的，有一个新的操作称为ClearUsers registered in the reducer，我们称之为

这是减速器中的一个新情况，因此也有一个新动作：

case AssumeIdActionTypes.GetUsersForNodeSuccess:
        const usersForNode = mapToHttpOption(action.users);
        return {...state,
            usersForNode: usersForNode,
            usersLoaded: hasUser(usersForNode),
            error: ''
        };

case AssumeIdActionTypes.ClearUsers:
    return {... state,
        usersForNode: []
    };

---

嗨@tekin我在stackblitlz上创建了一个演示。请提供你关于stackblitz的代码。谢谢克里希纳，我实际上忘记了我有一个解决方案。我将在下面发布。很抱歉，我很难在在线编辑器中重新创建它，因为有许多作品在一起工作。