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

Question

我在页面中有一个字体头，用于加载客户帐户的用户。 在我单击typehead结果中的一个项目后，用户加载到下一个选择框，但在我提交之前，我去从typehead中删除该选项，清除它并执行onBlur另一个选择框仍然显示错误的结果。

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

这是HTML，下面是我认为相关的代码。

附言我不是你可以想象的 Angular 专家

<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>

.....................

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());
}

Answer 1

这是我们的解决方案：

把它放在组件中。

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

如您所见，在化简器中注册了一个名为 ClearUsers 的新操作，我们称之为。

这是Reducer中的一个新案例，因此也是一个新的操作：

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