angular - 用户输入文本时以 ng-select 角度隐藏和显示动态占位符

Question

我试图在 ng select 控件中显示占位符，但是用户键入了一些东西，占位符并没有隐藏。我用下面的代码克服了这个问题。

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

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

任何线索将不胜感激。

标签： angularangular-ngselect

Answer 1

这是 css 如何实现显示和隐藏占位符

   .ng-placeholder {
        display: inline-block;
    }

    .ng-select-focused {
        .ng-placeholder {
            display: none;
        }
    }

    .ng-has-value {
        .ng-placeholder {
            display: none;
        }
    }