Angular自定义选择组件：绑定选择的选项

Question

我做了一个自定义选择，它隐藏了选择并在下拉菜单中选择一个项目。

但我无法将从下拉列表中选择的项目绑定到我选择的 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>

自定义组件 TS

import {Component, OnInit, Input} from '@angular/core';

export interface Option {
  key: number;
  value: string;
}

@Component({
  selector: 'alta-select',
  templateUrl: './alta-select.component.html',
  styleUrls: ['./alta-select.component.scss'],
  host: { 'class': 'alta-select' },
})
export class AltaSelectComponent implements OnInit {

  @Input() data: Option[] = [];
  toggle = false;
  selectedOption: Option;

  enableToggle = () => this.toggle = !this.toggle;

  select = (actualOption) => {
    this.enableToggle();
    this.selectedOption = actualOption;
  }

  ngOnInit(): void{
    this.selectedOption = this.data[0];
  }
}

您如何调用该组件（（更改）不起作用，因为选择永远不会改变值，只有下拉列表会改变，这就是我要绑定的值

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

Answer 1

将您的selectedOption 声明为输入和输出属性以便绑定到它。

@Input() selectedOption: Option;
@Output() selectedOptionChange = new EventEmitter<Option>();

...

select = (actualOption) => {
    this.enableToggle();
    this.selectedOption = actualOption;
    this.selectedOptionChange.emit(this.selectedOption);
  }

你可以通过双向绑定

<alta-select [data]="options" [(selectedOption)]="mySelection"></alta-select>

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

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

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

[value]="option"