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

Posted

技术标签:

【中文标题】以角度6动态加载formarray中的多个下拉列表【英文标题】:Dynamically load multiple dropdown in formarray in angular 6 【发布时间】:2019-01-27 23:50:36 【问题描述】:

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

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

Img Brief:姓名、年龄、出生日期就像标签字段。只有下拉菜单是表单。

首先我使用 *ngFor 在视图中加载值,然后我使用表单数组加载值。

在加载时它应该加载下拉值。如果我选择第一个下拉菜单。它应该改变第二个下拉值。在自己加载时,我会使用服务在两个下拉列表中加载数据。

component.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>

当前 samplevalue 变量值加载到最后一个 *ngfor 循环,因为动态下拉值正在根据 firstdropdown 更改每个数组,因此我无法设置该值。

【问题讨论】:

【参考方案1】:

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

//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=[
   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>

但要小心! dropdownvalue 如果是一个对象(选择的整个对象)

【讨论】:

以上是关于以角度6动态加载formarray中的多个下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

如何在选择时使用 formArray 索引加载动态下拉数据

以角度刷新下拉列表而不重新加载页面

如何在不弄乱下拉值的情况下使 Angular Reactive Formarray 中的级联下拉菜单工作

如何以角度在 FormArray 中设置值?

无法以角度反应形式获得 FormArray 结构

如果已经以相同的请求运行,则取消订阅/取消角度4中的现有HTTP / XHR调用