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];
  }
}

以及如何调用该组件（（更改））无效，因为select永不更改值，只有下拉列表有效，这就是我要绑定的值

<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"

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

1 个答案: