Angular中ng-select用户输入时动态placeholder的隐藏显示问题求解

问题根因 #

原有方案直接覆盖了@Input()传入的原始placeholder值，当父组件动态更新placeholder时，清空后无法恢复最新的动态值，原始值被修改后丢失。

解决方案 #

核心思路是新增独立状态变量记录用户输入状态，永远不要修改@Input()传入的原始占位符值，实现步骤如下：

1. 调整TS代码，拆分原始占位符变量和输入状态变量

// 保留原始输入的placeholder，全程不做修改
@Input() placeholder: string = '';
// 新增状态变量，标记当前是否存在用户搜索输入
private hasSearchInput = false;

ngOnInit() { 
  this.searchInput$.pipe(
    distinctUntilChanged(),
    debounceTime(500)
  ).subscribe(term => {
    // 仅修改状态变量，不碰原始placeholder值
    this.hasSearchInput = !!term?.length;
  });
}

2. 调整HTML模板，根据状态变量动态判断要展示的占位符

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

该方案下，父组件动态更新placeholder值时，模板会直接读取最新的原始值，不会受之前清空操作的影响。

优化补充 #

如果需要覆盖用户清空选中项的场景，可以额外监听ng-select的(clear)、(remove)事件，或订阅选中值的变化，当选中值为空时将hasSearchInput重置为false即可。

如果追求更简洁的写法，也可以直接在模板中使用异步流处理，无需额外订阅和声明状态变量：

[placeholder]="(searchInput$ | async)?.length ? '' : placeholder"

内容的提问来源于stack exchange，提问作者Mitesh