如何通过三元条件在下拉框[selected]/[ngValue]属性设置默认选中项？

嘿，我来帮你搞定这个问题！你想要根据输入框的数值自动切换下拉菜单的默认选中项，在Angular里其实有两种常用的实现方式，我给你一步步讲清楚：

这种方式适合简单的静态选项场景，核心是给每个<option>绑定[selected]属性，属性值是布尔类型的判断表达式（可以用三元条件简化）。

首先在组件类里定义绑定的变量：

// 组件.ts文件
export class YourComponent {
  time: number = 10; // 初始值，可根据需求调整
}

然后在模板里编写代码：

<!-- 组件.html文件 -->
<input type="number" name="time" [(ngModel)]="time">
<select class="form-control">
  <!-- 当time≤12时选中AM -->
  <option value="AM" [selected]="time <= 12">AM</option>
  <!-- 当time>12时选中PM，这里用三元条件也可以：[selected]="time > 12 ? true : false" -->
  <option value="PM" [selected]="time > 12">PM</option>
</select>

这里要注意：[selected]必须绑定布尔值，你原来的代码里绑定了字符串'PM'或'AM'，这是不生效的——浏览器只会识别true/false来决定是否选中选项。

这种方式更符合Angular的数据流理念，尤其适合选项是复杂对象或需要双向同步的场景。我们可以通过绑定ngModel来控制选中项，用三元条件动态赋值。

方式A：使用getter动态计算选中项 #

组件类代码：

export class YourComponent {
  time: number = 10;

  // 通过getter实时计算选中的时段
  get selectedPeriod(): string {
    return this.time > 12 ? 'PM' : 'AM';
  }
}

模板代码：

<input type="number" name="time" [(ngModel)]="time">
<!-- 单向绑定到getter，自动根据time更新选中项 -->
<select class="form-control" [ngModel]="selectedPeriod">
  <option [ngValue]="'AM'">AM</option>
  <option [ngValue]="'PM'">PM</option>
</select>

方式B：通过ngModelChange事件同步更新 #

如果需要支持用户手动切换下拉框后同步更新输入框的逻辑，可以用这种方式：
组件类代码：

export class YourComponent {
  time: number = 10;
  selectedPeriod: string = 'AM';

  // 当time变化时更新选中项
  onTimeChange() {
    this.selectedPeriod = this.time > 12 ? 'PM' : 'AM';
  }

  // 当选中项变化时同步time的范围（可选）
  onPeriodChange() {
    if (this.selectedPeriod === 'PM' && this.time <=12) {
      this.time += 12;
    } else if (this.selectedPeriod === 'AM' && this.time >12) {
      this.time -=12;
    }
  }
}

模板代码：

<input type="number" name="time" [(ngModel)]="time" (ngModelChange)="onTimeChange()">
<select class="form-control" [(ngModel)]="selectedPeriod" (ngModelChange)="onPeriodChange()">
  <option [ngValue]="'AM'">AM</option>
  <option [ngValue]="'PM'">PM</option>
</select>

你之前的示例里有两个关键问题导致不生效：

1. <option>标签没有设置具体的value或ngValue，浏览器无法识别选项的实际值；
2. [selected]绑定的是字符串'PM'/'AM'，但该属性需要的是布尔值（true/false），所以判断逻辑无法生效。

内容的提问来源于stack exchange，提问作者codegeek101