为何Angular下拉框未更新父组件值仍改变选中项？

1. 为何父组件未存储新值，下拉框仍会更新选中项？ #

这是原生HTML <select> 元素的默认行为：当用户手动选择选项时，浏览器会直接修改DOM元素的选中状态，这个操作是即时生效的，不受Angular属性绑定的直接阻断。

你的代码里，子组件的<select>通过[value]="selected"做了单向绑定，但该绑定仅在Angular变更检测触发时才会同步值。用户选择新选项后，虽然父组件没更新selectedValue，但原生DOM已经改变了选中状态，而本次事件循环中Angular没有触发[value]重新绑定的理由（因为selected输入属性的值未发生变化），所以下拉框会保留用户选择的新选项。

2. 该行为是否由Angular变更检测或属性绑定机制导致？ #

本质是原生DOM行为 + Angular变更检测触发逻辑共同作用的结果：

• 原生<select>的选中状态变更不受Angular控制，用户操作会直接修改DOM状态。
• Angular的变更检测会在事件回调执行后触发，但此时父组件的selectedValue未变化，子组件的@Input() selected值也未更新，因此Angular不会执行[value]="selected"的重新绑定，不会将DOM的选中状态改回原始的selected值。

3. 如何确保下拉框仅显示父组件提供的值？ #

要实现完全受控的下拉框，确保只有父组件的selectedValue能决定选中状态，有两种常用方案：

方案一：手动重置选中状态 #

在子组件的onChange事件回调中，强制将<select>的value重置为@Input() selected的值：

修改子组件模板，给<select>添加模板引用变量：

<select #dropdown (change)="onChange($event, dropdown)" [value]="selected">
  <option value="" hidden>default</option>
  <option *ngFor="let option of options" [value]="option.value">
    {{ option.text }}
  </option>
</select>

修改子组件的onChange方法：

onChange(event: any, dropdown: HTMLSelectElement) {
  this.selectionChange.emit(event);
  // 强制重置为父组件传入的selected值
  dropdown.value = this.selected;
}

方案二：使用Reactive Forms（推荐） #

通过FormControl完全控制下拉框的值，将FormControl的值与@Input() selected同步，确保值始终由父组件驱动：

修改子组件：

import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-custom-dropdown',
  templateUrl: './custom-dropdown.component.html',
  styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit, OnChanges {
  @Input() options: { value: string; text: string }[] = [];
  @Input() selected: string = '';

  @Output() selectionChange: EventEmitter<string> = new EventEmitter<string>();

  selectControl = new FormControl('');

  ngOnInit() {
    // 监听控件值变化，向父组件发射事件
    this.selectControl.valueChanges.subscribe(value => {
      this.selectionChange.emit(value);
      // 强制重置为父组件的selected值（如果父组件没更新）
      this.selectControl.setValue(this.selected, { emitEvent: false });
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    // 当父组件的selected变化时，同步更新控件值
    if (changes['selected']) {
      this.selectControl.setValue(this.selected, { emitEvent: false });
    }
  }
}

修改子组件模板：

<select [formControl]="selectControl">
  <option value="" hidden>default</option>
  <option *ngFor="let option of options" [value]="option.value">
    {{ option.text }}
  </option>
</select>

这种方式能更优雅地实现受控组件，完全由父组件的selected值决定下拉框的选中状态，用户的临时选择会被立刻重置。

内容的提问来源于stack exchange，提问作者David Küng