如何在Angular FormArray中动态绑定ngSelect下拉列表

Question

[我在Anguarl FormArray中遇到带有ngSelect下拉列表的绑定列表的问题，我正在用FormArray构建包含州和城市下拉列表的FormGroup。

状态ddl将加载oninit（），然后在我更改状态时，城市ddl应该加载各自的数据，但不应影响其他城市ddl。

在选择受尊重的州之前，不应加载其他城市下拉菜单。

我最初可以加载状态，但是无法在状态更改时绑定city ddl。这是我的代码。请看看。

import { Component, OnInit } from "@angular/core";
import {
  FormBuilder,
  FormGroup,
  FormArray,
  AbstractControl
} from "@angular/forms";
import { debounceTime } from "rxjs/operators";

@Component({
  selector: "state-block",
  templateUrl: "./state-block.component.html",
  styleUrls: ["./state-block.component.scss"]
})
export class StateBlockComponent implements OnInit {
  typeLoadName: string;
  lFormGroup: FormGroup;
  states = [1, 2, 3, 4];

  stateControl: AbstractControl;
  stateFormControls: FormGroup;

  get lFormArray(): FormArray {
    return this.lFormGroup.get("lFormArray") as FormArray;
  }

  statelist = ["state1", "state2", "state3", "state4"];
  citylist = [];
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.initControls();
  }
 
  initControls() {
    this.lFormGroup = this.fb.group({
      lFormArray: this.fb.array([])
    });
    this.states.forEach(element => {
      this.stateFormControls = this.createControls();

      const myFormArray = <FormArray>this.lFormGroup.get("lFormArray");

      this.stateFormControls.get("groupIndex").patchValue(myFormArray.length);

      this.stateFormControls.valueChanges.subscribe(data =>
        this.onValuesChanged(data)
      );

      this.lFormArray.push(this.stateFormControls);

      this.lFormArray.valueChanges.subscribe(value =>
        this.onFormArrayValueChanged(value)
      );

      const citylist = [
        "zonePeril1",
        "zonePeril2",
        "zonePeril3",
        "zonePeril4"
      ];

      const selectedStateControl = this.stateFormControls.get("state");
      selectedStateControl.valueChanges.subscribe(data => {
        this.stateFormControls.get("city").value = zonePerilList;
        
      });
    });
  }
  onFormArrayValueChanged(value: any): void {
    console.log("on form array value changed", value);
  }
  onValuesChanged(data: any): void {
    console.log("on value changed", data);
    
  }
  createControls() {
    return this.fb.group({
      groupIndex: "",
      state: "",
      city: "",
      
    });
  }
  
}

<form [formGroup]="lFormGroup">
  <div [formGroup]="lFormGroup">
    <div formArrayName="lFormArray">
      <div
        [formGroupName]="i"
        *ngFor="let item of lFormArray.controls; let i = index"
      >
        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label" for="cityId">State</label>
          <div class="col-md-3">
            <ng-select
              [items]="statelist"
              bindLabel="name"
              placeholder="Select state"
              formControlName="state"                         
            >
            </ng-select>
          </div>
          <label class="col-md-2 col-form-label" for="cityId">City</label>
          <div class="col-md-3">
            <ng-select
              [items]="citylist"
              bindLabel="name"
              placeholder="Select city"
              formControlName="city"
            >
            </ng-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

This is not answered yet

Answer 1

请检查stackblitz示例是您想要的吗？

https://stackblitz.com/edit/ng-select-egj2ht