Angular 以角度6动态加载formarray中的多个下拉列表

我想加载两个下拉列表一个下拉列表基于另一个下拉列表

我正在使用formarray加载表单值。在我的实际场景中，首先我用表单数据（formarray）在*ngfor循环中加载值。下图显示了我的示例场景

Img简介：姓名、年龄、出生日期与标签字段类似。只有下拉列表是表单

首先，我使用*ngFor加载视图中的值，然后使用表单数组加载值

在此加载时，它应加载下拉值。如果我选择第一个下拉列表。它应该更改第二个下拉列表值。在加载时，我使用服务在两个下拉列表中加载数据

组件。ts

this.wholedata.foreach({ x =>
 this.sampleservice.dropdown(x.firstdropdownvalue).subscribe({
  this.samplevalue = res;
  control.push({
   dropdownvalue1: x.firstdropdownvalue,
   dropdownvalue2: x.seconddropdownvalue
  })
 })
})

component.html

<div *ngFor="let data of datas">
 //formarray codes here placed
 <span>name: {{data.name}}</span>
 <span>age: {{data.age}}</span>
 <span>dob: {{data.dob}}</span>
 <span>
  <select formControlName="dropdownvalue1" (change)="changevalues($event)">
   <option *ngFor="let data of dropdownvalue">{{data.values}}</option>
  </select>
 </span>
 <span>
  <select formControlName="dropdownvalue2">
   <option *ngFor="let data of samplevalue">{{data.values}}</option>
  </select>
 </span>
 <button type="submit" (click)="submitValues()">
</div>

//此处放置正式阵列代码
名称：{{data.name}
年龄：{{data.age}
dob:{{data.dob}
{{data.values}}
{{data.values}}

---

当前samplevalue变量值加载到last*ngfor循环，因为动态下拉列表值根据firstdropdown更改每个数组，因此我无法设置值。

必须为每个下拉列表使用不同的列表。所以

//you have a variable "options"
options:any;

//when you change one drop
this.sampleservice.dropdown(x.firstdropdownvalue).subscribe({
  //Your response I supouse will be like ["one","two","three"..] (1)
  //or [{value:1,data:"one"},{value:2,data:"two"}...] (2)
  this.options[x.firsdropdownvalue]= res; //<--store the res in the object ...
  })

//So, your dropdowns can be like
<span>
  <select formControlName="dropdownvalue1" (change)="changevalues($event)">
  </select>
 </span>
 <span>
  <select formControlName="dropdownvalue2">
   <option *ngFor="let data of options[myForm.get('dropdownvalue1').value]">  
   <!--if your data is like (1) -->
   {{data}}   
   <!--if your data is like (2)
   {{data.values}}
    -->
   </option>
  </select>
 </span>

//您有一个变量“options”
选择：任何；
//当你换一滴
this.sampleservice.dropdown（x.firstdropdownvalue）.subscribe({
//我希望你的回答是[“一”、“二”、“三”。]
//或者[{value:1，数据：“一”}，{value:2，数据：“两”}…]（2）
this.options[x.firsdropdownvalue]=res//

如果您的下拉列表中没有大量项目，另一个选择是使用类似的内容

options=[
   {value:1,data:"one",values:[{value:1,data:"one-one"},{value:2,data:"one-two"},..]},
   {value:2,data:"two",values:[{value:1,data:"two-one"},{value:2,data:"two-two"},..]},
   ...]

// Then you can write
<span>
  <select formControlName="dropdownvalue1" >
   <option *ngFor="let data of options" [ngValue]="data">{{data.data}}</option>
  </select>
 </span>
 <span>
  <select formControlName="dropdownvalue2">
   <option *ngFor="let data of myForm.get('dropdownvalue1').value.values">{{data.values}}</option>
  </select>
 </span>

选项=[
{value:1，数据：“一”，值：[{value:1，数据：“一个一个”}，{value:2，数据：“一个二个”}，…]}，
{value:2，data:“two”，value:[{value:1，data:“two-one”}，{value:2，data:“two-two”}，…]}，
...]
//然后你就可以写了
{{data.data}
{{data.values}}

但是要小心！如果是对象（选择的整个对象），则为dropdownvalue