Angular中基于对象实现动态联动下拉选择框问题

嘿，我来帮你搞定这个年份和周期的联动下拉框！你的原代码问题在于第二个下拉框一直在遍历整个fps数组，而没有根据选中的年份去筛选对应的周期列表，也没有绑定选中的年份变量来跟踪用户选择。

下面是修改后的完整方案：

1. 组件类（.ts文件）修改 #

首先在你的组件里添加一个变量存储选中的年份，再写一个方法来获取对应周期：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 你的原始数据
  fps = [
    {year: "2015", period: ["P1"]},
    {year: "2016", period: ["P1", "P2"]},
    {year: "2017", period: ["P1", "P2", "P3"]}
  ];
  
  // 用于跟踪选中的年份
  selectedYear: string | null = null;

  // 根据选中年份返回对应的周期列表
  getCurrentPeriods() {
    // 找到选中年份对应的数组项
    const matchedYear = this.fps.find(item => item.year === this.selectedYear);
    // 如果找到就返回周期，否则返回空数组
    return matchedYear ? matchedYear.period : [];
  }
}

2. 模板（.html文件）修改 #

更新两个下拉框的逻辑，绑定选中值并动态渲染周期：

<select [(ngModel)]="selectedYear">
  <option disabled [value]="null">Select year</option>
  <option *ngFor="let item of fps" [value]="item.year"> {{ item.year }} </option>
</select> &nbsp;

<!-- 没选中年份时禁用第二个下拉框，提升用户体验 -->
<select [disabled]="!selectedYear">
  <option disabled [value]="null">Select period</option>
  <!-- 遍历选中年份对应的周期列表 -->
  <option *ngFor="let period of getCurrentPeriods()" [value]="period"> {{ period }} </option>
</select>

3. 别忘了导入FormsModule #

因为我们用了[(ngModel)]双向绑定，需要在你的模块（比如AppModule）里导入FormsModule，否则会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已有的导入（比如BrowserModule）
    FormsModule
  ],
  declarations: [YourComponent], // 确保你的组件已声明
})
export class AppModule { }

关键改动说明 #

• 用[(ngModel)]="selectedYear"实现了第一个下拉框选中值的双向绑定，组件能实时获取用户选择的年份。
• 第二个下拉框现在遍历的是getCurrentPeriods()返回的动态列表，只会显示选中年份对应的周期。
• 添加了[disabled]="!selectedYear"，在用户未选择年份时禁用第二个下拉框，避免无效操作。
• 修正了原代码中第二个下拉框绑定数组到value的错误，现在绑定单个周期值，更符合表单逻辑。

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