angular中多选下拉的单一数据源

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-dropdown',
  template: `
    <select [formControl]="selectedOptions" multiple>
      <option *ngFor="let option of options" [value]="option">{{ option }}</option>
    </select>
  `,
})
export class DropdownComponent {
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
  selectedOptions: FormControl;

  constructor(private formBuilder: FormBuilder) {
    this.selectedOptions = this.formBuilder.control([]);
  }
}

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-dropdown',
  template: `
    <select [formControl]="selectedOptions" multiple>
      <option *ngFor="let option of options" [value]="option">{{ option }}</option>
    </select>
    <button (click)="getSelectedOptions()">Get Selected Options</button>
  `,
})
export class DropdownComponent {
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
  selectedOptions: FormControl;

  constructor(private formBuilder: FormBuilder) {
    this.selectedOptions = this.formBuilder.control([]);
  }

  getSelectedOptions() {
    console.log(this.selectedOptions.value);
  }
}