如何在自定义Div列表中实现nz-select的ngModelChange等功能？

模板代码（component.html） #

<!-- 下拉触发区域 + 搜索框 -->
<div class="custom-select-trigger" (click)="toggleDropdown()">
  <input 
    type="text" 
    [(ngModel)]="selectedValue" 
    (input)="onSearchChange($event)"
    placeholder="请选择或搜索"
  >
  <span class="dropdown-icon">{{ isDropdownOpen ? '▲' : '▼' }}</span>
</div>

<!-- 下拉选项列表 -->
<div class="custom-select-options" *ngIf="isDropdownOpen">
  <div 
    class="option-item"
    *ngFor="let option of filteredOptions"
    [class.active]="option.value === selectedValue"
    (click)="selectOption(option)"
  >
    {{ option.label }}
  </div>
</div>

组件类代码（component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-select',
  templateUrl: './custom-select.component.html',
  styleUrls: ['./custom-select.component.scss']
})
export class CustomSelectComponent {
  // 原始选项列表，对应原nz-select的options配置
  options = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
    { label: '选项4', value: '4' }
  ];
  filteredOptions = [...this.options]; // 搜索过滤后的选项集合
  selectedValue: string | undefined; // 绑定选中值，对应原ngModel
  isDropdownOpen = false; // 下拉菜单展开状态

  // 切换下拉菜单显示/隐藏
  toggleDropdown() {
    this.isDropdownOpen = !this.isDropdownOpen;
    // 展开时重置过滤列表（可根据需求调整，比如保留当前搜索关键词）
    if (this.isDropdownOpen) {
      this.filteredOptions = [...this.options];
    }
  }

  // 实时过滤选项，模拟nz-select的搜索功能
  onSearchChange(event: Event) {
    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
    this.filteredOptions = this.options.filter(option => 
      option.label.toLowerCase().includes(searchTerm)
    );
  }

  // 处理选项选中逻辑，模拟原ngModelChange事件
  selectOption(option: { label: string; value: string }) {
    this.selectedValue = option.value;
    this.isDropdownOpen = false;
    // 若需对外抛出变更事件（比如作为子组件使用），可添加以下代码：
    // @Output() ngModelChange = new EventEmitter<string>();
    // this.ngModelChange.emit(option.value);
  }

  // 若要实现标准ngModel双向绑定（子组件场景），添加以下get/set：
  // @Input()
  // get ngModel() {
  //   return this.selectedValue;
  // }
  // set ngModel(value: string | undefined) {
  //   this.selectedValue = value;
  // }
  // @Output() ngModelChange = new EventEmitter<string>();
}

基础样式（component.scss） #

.custom-select-trigger {
  position: relative;
  display: inline-block;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 6px 30px 6px 12px;
  cursor: pointer;
  width: 200px;

  input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
  }

  .dropdown-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.custom-select-options {
  position: absolute;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-top: 4px;
  padding: 4px 0;
  background: #fff;
  width: 200px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;

  .option-item {
    padding: 6px 12px;
    cursor: pointer;

    &:hover, &.active {
      background: #f5f5f5;
    }
  }
}

核心逻辑说明 #

• 双向绑定模拟：通过[(ngModel)]="selectedValue"直接绑定选中值，若作为独立子组件，可通过@Input() ngModel和@Output() ngModelChange实现标准Angular双向绑定语法。
• 搜索过滤：监听输入框input事件，实时对选项列表做模糊匹配过滤，和原nz-select搜索逻辑一致。
• 选中状态管理：通过[class.active]给选中选项添加高亮样式，点击选项时更新选中值并自动关闭下拉菜单。
• 下拉状态控制：用isDropdownOpen变量控制选项列表的显示/隐藏，点击触发区域切换状态。

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