时间戳

首页 > 解决方案 > 用户输入文本时在 ng-select 中隐藏占位符

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

问题描述

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

标签： angulartypescriptautocompleteangular9

解决方案

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

在 html

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

在 TS 中。

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

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

推荐阅读