Angular 角度4嵌套下拉列表

我正在尝试添加嵌套下拉列表。如果单击“添加城市”，它将创建另一个下拉列表。没有下拉列表，我成功了。请看下面

…component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <select  formControlName="cities">
    <option *ngFor="let city of myCities; let i=index" [value]='itemname' >
      {{ city }}
    </option>
  </select>
  <br>
  <button>Submit</button>
  <button (click)="addCity()">Add City</button>
  <button (click)="remove(i)">Remove</button>
</form>

显示错误如下：

E:/angular/nestedForm2/src/app/order-form/order-form.component.ts （21,39）：类型“AbstractControl”上不存在属性“push”

E:/angular/nestedForm2/src/app/order-form/order-form.component.ts （23,42）：类型“AbstractControl”上不存在属性“removeAt”

---

我尝试了不同的方法，但仍然没有找到任何解决办法。您能提供帮助吗？

若要避免出现错误，您需要将您的代码转换到定义了

push

和

removeAt

的子类

(this.form.get('cities') as FormArray).push(new FormControl())
(this.form.get('cities') as FormArray).removeAt(index)

您必须这样做，因为TypeScript无法确定

form.get（'cities'）

的确切类型，因为您是通过提供字符串来访问它的。只有作为开发人员的您才知道，根据表单中的数据结构，

form.get（'cities'）

将包含一个

FormArray

我找到了解决方案

component.html：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div formArrayName="cities">

      <div *ngFor="let city of cities.controls; let i=index">

        <select [formControlName]="i">

            <option *ngFor="let itemname of myCities" [value]='itemname' >
                {{ itemname }}
            </option>

        </select> 

      </div>

    </div>

    <br>

    <button>Submit</button>
  </form>

  <br>

  <button (click)="addCity()">Add City</button>
  <button (click)="remove(i)">Remove City</button>

---

谢谢你，拉扎尔。你能告诉我如何进行转换吗？我在回答中提供了一段代码片段。您可以使用

as

进行强制转换，正如我在这里所展示的。我已经完成了addCity（）{（this.form.get（'cities'）作为FormArray）。push（new-FormControl（））}&remove（index）{（this.form.get（'cities'）作为FormArray）。removeAt（index）}。但仍然发现错误“error TypeError:this.form.get（…）.push不是函数”这是一个运行时错误，与您的问题无关。这意味着你的逻辑不好。有没有办法制作嵌套下拉列表？

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div formArrayName="cities">

      <div *ngFor="let city of cities.controls; let i=index">

        <select [formControlName]="i">

            <option *ngFor="let itemname of myCities" [value]='itemname' >
                {{ itemname }}
            </option>

        </select> 

      </div>

    </div>

    <br>

    <button>Submit</button>
  </form>

  <br>

  <button (click)="addCity()">Add City</button>
  <button (click)="remove(i)">Remove City</button>

import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-order-form',
  templateUrl: './order-form.component.html',
  styleUrls: ['./order-form.component.css']
})
export class OrderFormComponent implements OnInit {

  form = new FormGroup({
    cities: new FormArray([
      new FormControl([null]),
    ]),
  });



  myCities = ['Dhaka','Dubai','Munich'];


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

    addCity() { this.cities.push(new FormControl()); }

    remove(index) { (this.form.get('cities') as FormArray).removeAt(index) }

  constructor() { }

  ngOnInit() {
  }

  onSubmit() {
    console.log(this.cities.value);  // ['SF', 'NY']
    console.log(this.form.value);    // { cities: ['SF', 'NY'] }
  }

  setPreset() { this.cities.patchValue(['LA', 'MTV']); }


}