用户输入文本时在ng-select中隐藏占位符

Question

我试图在我的Angular 9项目中将ng-select用于材料设计以实现自动完成。默认情况下，当用户输入文本ng-select时，会在自动完成输入字段顶部显示占位符。但是，我想在用户输入文本后立即隐藏占位符，并在清除输入字段时显示该占位符。有没有办法使用CSS来实现这一目标？项目已上传到StackBlitz供参考

Answer 1

我建议使用元素提供的搜索事件。它会为您提供输入的值，在这种情况下，您只关心输入是否有值。存在一个css解决方案，但是感觉更干净。

在html中

<ng-select ...
   placeholder="{{myPlaceholder}}"
   (search)="onSearch($event)">
  </ng-select>

在TS中。

.
.
myPlaceHolder = "Select Person"
.
.
onSearch($event) {

 this.myPlaceHolder = $event.term == '': 'Select Person': '';
}