Angular 角度自定义选择组件：绑定选定选项

我做了一个自定义选择，它隐藏了选择，并在您选择项目的地方做了一个下拉列表

但是我无法将从下拉列表中选择的项目绑定到select html元素

自定义组件html

<div class="select">
  <select class="select-hidden" [(ngModel)]="selectedOption">
    <option *ngFor="let option of data" [value]="option.key">{{option.value}}</option>
  </select>

  <div class="select-styled" (click)="enableToggle()" [ngClass]="{'active' : toggle}">
    {{selectedOption.value}}
  </div>

  <ul class="select-options" [ngClass]="{'block' : toggle}">
    <li (click)="select(option)" *ngFor="let option of data" >{{option.value}}</li>
  </ul>
</div>

您如何调用该组件（更改）不起作用，因为select never change值只有下拉菜单起作用，这就是我试图绑定的值

<alta-select [data]="options" (change)="changeTest($event)"></alta-select>

---

将您的

selectedOption

声明为输入和输出属性，以便绑定到它

@Input（）选择选项：Option；
@Output（）selectedOptionChange=neweventemitter（）；
...
选择=（实际操作）=>{
这个.enableTokle（）；
this.selectedOption=实际操作；
this.selectedOptionChange.emit（this.selectedOption）；
}

您可以通过

或者如果您只对变更事件感兴趣

此外，您可能必须更改自定义选择中的值绑定。选项应该是值而不是键

[value]=“选项”

非常感谢您的帮助，我们仍在努力解决这个问题。您是否有其他信息：“如果我填写表单，如何获取选择数据？”（在提交表单时获取选择数据）.我建议你只需花几个小时就可以完成正式的角度教程，基本上涵盖了开始学习所需的所有知识

<alta-select [data]="options" (change)="changeTest($event)"></alta-select>