如何通过TypeScript重置igx-select选中值 点击按钮显示占位符

两种方案都可以实现点击触发清空选中值、回显placeholder的效果，适配你当前的ngModel绑定写法：

方案1：直接清空双向绑定值（推荐，实现最简单） #

你当前已经通过[(ngModel)]将选择框和cell.value做了双向绑定，只需要在触发事件里把绑定值置为null/undefined即可，组件检测到无匹配选中项时会自动显示placeholder。

• 给触发重置的按钮绑定点击事件：

<button igxButton (click)="handleReset()">清空部门选择</button>

• 在组件TS文件中实现重置逻辑：

handleReset() {
  // 不要赋值为空字符串，避免和选项值意外匹配
  this.cell.value = null;
}

方案2：调用组件实例内置clear方法 #

如果需要操作组件本身的API，可以通过模板变量获取igx-select实例，调用官方提供的清空方法，双向绑定的值也会同步更新：

• 在TS文件中获取模板内的igx-select实例：

import { Component, ViewChild } from '@angular/core';
import { IgxSelectComponent } from 'igniteui-angular';

@Component({/* 你的组件配置 */})
export class YourComponent {
  // 关联模板里#selectDepartment的组件实例
  @ViewChild('selectDepartment') selectDepartment!: IgxSelectComponent;

  // 重置逻辑
  handleReset() {
    this.selectDepartment.clear();
  }
}

注意事项 #

如果选择框配置了必填校验规则[required]="true"，清空值后会触发必填校验提示，同步重置表单校验状态即可消除提示。

效果参考：

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