当用户输入文本时,隐藏并显示ng中的动态占位符选择角度



我试图在ng选择控件中显示占位符,但用户键入了一些内容,占位符不会隐藏。我用下面的代码克服了这个问题。

@Input() placeholder;
ngOnInit() { 
this.searchInput$.pipe(
distinctUntilChanged(),
debounceTime(500)
).subscribe(term => {
term?.length > 0 ? this.placeholder = '' : this.placeholder = this.placeholder;
});
}

Html模板:

<ng-select [items]="items$ | async" 
[multiple]="multiSelect" bindLabel="name" 
[appendTo]="appendTo" [placeholder]="placeholder">

但当占位符是动态的时,此代码会将占位符重置为空字符串。

任何线索都将不胜感激。

以下是css如何显示和隐藏占位符

.ng-placeholder {
display: inline-block;
}
.ng-select-focused {
.ng-placeholder {
display: none;
}
}
.ng-has-value {
.ng-placeholder {
display: none;
}
}

最新更新