在 angular 6 中以格式数组动态加载多个下拉列表
Dynamically load multiple dropdown in formarray in angular 6
我想加载两个下拉菜单,一个下拉菜单基于另一个下拉菜单。
我正在使用 formarray 加载表单值。在我的实际场景中,首先我使用表单数据(formarray)在 *ngfor 循环中加载值。下图显示了我的示例场景。
Img Brief: name, age, dob 就像标签字段。只有下拉菜单是表单。
首先我使用 *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 更改每个数组,所以我无法设置值。
您必须为每个下拉列表使用不同的列表。所以
//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 如果一个对象(选择的整个对象)
我想加载两个下拉菜单,一个下拉菜单基于另一个下拉菜单。
我正在使用 formarray 加载表单值。在我的实际场景中,首先我使用表单数据(formarray)在 *ngfor 循环中加载值。下图显示了我的示例场景。
Img Brief: name, age, dob 就像标签字段。只有下拉菜单是表单。
首先我使用 *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 更改每个数组,所以我无法设置值。
您必须为每个下拉列表使用不同的列表。所以
//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 如果一个对象(选择的整个对象)