如何根据用户选择的天数动态生成对应数量的药品选择Select下拉框？

以下是基于你现有代码的改造方案，实现选择1-7天后自动生成对应数量的药品选择下拉框：

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

首先在组件的TypeScript文件中添加必要的变量和逻辑：

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

@Component({
  selector: 'app-plan-form',
  templateUrl: './plan-form.component.html',
  styleUrls: ['./plan-form.component.css']
})
export class PlanFormComponent {
  // 存储表单数据，包含每天选择的药品
  formData = {
    firstDate: '',
    lastDate: '',
    planDays: 0,
    dailyMeds: [] as string[]
  };

  // 药品选项列表，可根据实际需求修改
  medicineList = ['布洛芬', '对乙酰氨基酚', '阿莫西林', '维生素C'];
  // 用来循环生成下拉框的天数数组
  daysRange: number[] = [];

  // 选中天数变化时触发，生成对应长度的天数数组
  onDaysSelect(days: number) {
    this.formData.planDays = days;
    // 生成1到选中天数的连续数组
    this.daysRange = Array.from({length: days}, (_, idx) => idx + 1);
    // 初始化药品数组，确保长度与天数匹配
    this.formData.dailyMeds = new Array(days).fill('');
  }

  checkDates(formValue: any) {
    // 保留你原有的日期校验逻辑
    console.log('确认日期:', formValue);
  }

  fetchPlans() {
    // 保留你原有的计划获取逻辑，如果是动态加载天数选项，可在此填充下拉框
  }
}

2. HTML模板修改 #

更新表单模板，添加天数选择的双向绑定和动态下拉框循环：

<form #datesForm="ngForm" (ngSubmit)="checkDates(datesForm.value)">
  <div class="elem-group inlined">
    <label>计划开始日期</label>
    <input type="date" name="firstDate" [(ngModel)]="formData.firstDate" required>
  </div>
  <div class="elem-group inlined">
    <label>计划结束日期</label>
    <input type="date" name="lastDate" [(ngModel)]="formData.lastDate" required>
  </div>
  <button class="btn-fetch" (click)="checkDates(datesForm.value)">确认日期</button>

  <div class="elem-group">
    <label>选择计划天数（1-7天）</label>
    <select name="planDays" [(ngModel)]="formData.planDays" (change)="onDaysSelect(formData.planDays)" required>
      <option value="">请选择天数</option>
      <option value="1">1天</option>
      <option value="2">2天</option>
      <option value="3">3天</option>
      <option value="4">4天</option>
      <option value="5">5天</option>
      <option value="6">6天</option>
      <option value="7">7天</option>
    </select>

    <!-- 动态生成对应数量的药品选择框 -->
    <div *ngFor="let day of daysRange; let idx = index" class="elem-group" style="margin-top:15px;">
      <label>第{{day}}天选择药品</label>
      <select name="dailyMeds_{{idx}}" [(ngModel)]="formData.dailyMeds[idx]" required>
        <option value="">请选择药品</option>
        <option *ngFor="let med of medicineList" [value]="med">{{med}}</option>
      </select>
    </div>
  </div>

  <button type="submit">保存计划</button>
</form>

3. 关键逻辑说明 #

• 动态生成下拉框：通过*ngFor循环daysRange数组，根据选中的天数自动渲染对应数量的药品选择框，每个框的name属性添加索引后缀避免表单冲突。
• 数据绑定：使用[(ngModel)]将每个下拉框的选中值绑定到formData.dailyMeds数组的对应位置，提交表单时可直接获取每天的药品选择结果。
• 数组初始化：选中天数变化时，重新生成daysRange数组并初始化dailyMeds数组，确保数据结构与视图匹配。

注意事项 #

• 确保你的Angular模块中已经导入了FormsModule（在app.module.ts的imports数组中添加FormsModule），否则ngModel无法正常使用。
• 如果计划天数选项是从API动态获取的，可在fetchPlans方法中填充下拉框选项，确保每个选项的value为数字类型的天数。

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