Angular2中form标签内ng-template生成下拉框点击添加后失选求助

我帮你分析下这个问题的根源：当你用<form>标签包裹这些下拉框时，Angular会把它们纳入模板驱动表单的管理体系中。模板驱动表单依赖控件的name属性和ngModel来跟踪每个表单控件的状态。当你点击添加按钮往数组里新增元素时，Angular会重新遍历数组生成新的DOM元素，同时可能会重新初始化整个表单的控件树——这就导致之前已选中的下拉框，虽然数据模型里的值还存在，但视图层面的控件状态没有和模型同步，所以显示成空白。而移除<form>标签后，这些下拉框脱离了表单管理，只是普通的绑定，所以不会出现这个问题。

下面给你几个可行的解决方案：

方案1：改用响应式表单（推荐） #

响应式表单能让你更精准地控制每个表单控件的状态，动态添加元素时不会影响已有控件。

首先在组件类中定义FormArray：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  form: FormGroup;
  options = [/* 你的下拉选项数组，比如 {value: '1', label: '选项1'} */];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      items: this.fb.array([this.createItem()])
    });
  }

  createItem(): FormGroup {
    return this.fb.group({
      selectedOption: [''] // 初始值可以设为空或默认值
    });
  }

  get items(): FormArray {
    return this.form.get('items') as FormArray;
  }

  addItem() {
    this.items.push(this.createItem());
  }
}

然后在模板中绑定FormArray：

<form [formGroup]="form">
  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
      <select formControlName="selectedOption">
        <option value="">请选择</option>
        <option *ngFor="let opt of options" [value]="opt.value">{{opt.label}}</option>
      </select>
    </div>
  </div>
  <button (click)="addItem()">添加</button>
</form>

方案2：给模板驱动表单的每个控件设置唯一name #

如果坚持用模板驱动表单，要确保每个下拉框的name属性是唯一的，这样Angular能准确跟踪每个控件的状态：

组件类：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  items = [{ selectedOption: '' }]; // 初始数组
  options = [/* 你的下拉选项数组 */];

  addItem() {
    this.items.push({ selectedOption: '' });
  }
}

模板：

<form>
  <div *ngFor="let item of items; let i = index">
    <select [(ngModel)]="item.selectedOption" [name]="'option_' + i">
      <option value="">请选择</option>
      <option *ngFor="let opt of options" [value]="opt.value">{{opt.label}}</option>
    </select>
  </div>
  <button (click)="addItem()">添加</button>
</form>

这里用'option_' + i生成唯一的name，避免Angular混淆不同的控件。

方案3：手动触发变更检测 #

如果上面两种方法都不想改，可以在Add方法里手动触发变更检测，强制Angular同步视图和模型：

组件类：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  items = [{ selectedOption: '' }];
  options = [/* 你的下拉选项数组 */];

  constructor(private cdr: ChangeDetectorRef) {}

  addItem() {
    this.items.push({ selectedOption: '' });
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}

这样添加元素后，Angular会强制更新视图，让已选中的下拉框显示正确的值。

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