如何在 Angular 8 中使用基于 API 的数据生成动态选项卡
How to generate dynamic tab with data based on API in Angular8
我有以下 JSON 回复。
根据 JSON 的响应，我正在创建动态选项卡，并且在每个选项卡中我想根据下面提到的条件推送 formArray。
**在下面的回复中，
const myObj = [
{
'TabName': 'Test1',
'otherDetails': [
{
'processTechType': 'Continuous'
},
{
'processTechType': 'Batch',
},
]
},
{
'TabName': 'Test2',
'otherDetails': [
{
'processTechType': 'Batch'
}
]
}
];
对于 Ex - TabName Test1 和 TabName Test2 是我动态显示的选项卡名称。现在在 Test1 选项卡中，我想推送 formArray Continuous 和 formArray Batch 这两种形式。因为在 Test1 选项卡中，我有连续和批处理的 processTechType 数组。所以它将在 Test1 选项卡中显示这两种形式。
Ex - 2 -- 现在在 Test2 选项卡中，我只想推送 formArray 批处理表单。因为在 Test2 选项卡中，我在 otherDetails 对象中有 processTechType 批处理。所以它只会在Test2 Tab中显示Batch形式。
我的意思是，每次它都会检查响应中的 Tabname 和 otherDetails 键，并仅在特定选项卡上显示基于 processTechType 数组键的表单。
我有以下代码。但它在所有选项卡中推送两种形式，而不是在特定选项卡上。例如 - 从我的代码中，它在 Test1 和 Test2 选项卡中显示一次 Continuous formArray 和 Batch formArray 两次。
预期输出 -
在Test1选项卡中，它会推送一个Continuous和一个Batch表单。
在Test2 Tab中，只会显示push batch form
任何人都可以帮助我让我的代码工作以获得预期的输出。
getMakeLineData() {
var otherDetails = myObj.filter(m => m.otherDetails).map(m => m.otherDetails);
this.makeLineData = myObj;
if (otherDetails) {
otherDetails.forEach(element => {
for (var i of element) {
if (i.processTechType === 'Continuous') {
this.addQuantity();
}
else if (i.processTechType === 'Batch') {
this.addBatch();
}
}
});
}
}
createContinuousForm() {
return this.fb.group({
designProcess: ['', [Validators.required]]
});
}
createBatchForm() {
return this.fb.group({
avgBCT: ['', [Validators.required]]
});
}
continuousType(): FormArray {
return this.dataCollectionForm.get("continuousType") as FormArray;
}
batchType(): FormArray {
return this.dataCollectionForm.get("batchType") as FormArray;
}
addQuantity() {
this.continuousType().push(this.createContinuousForm());
}
addBatch() {
this.batchType().push(this.createBatchForm());
}
HTML模板
<div class="tabGroupDiv row">
<div class="lossLinesDiv">
<mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
<mat-tab *ngFor="let lineData of makeLineData">
<ng-template mat-tab-label>
<button class="validatorTabBgClr">{{lineData.makeLineName}}</button>
</ng-template>
<form [formGroup]="dataCollectionForm" (ngSubmit)="onSubmit()">
<!-- <--continuous Form start here -->
<div class="admin-console-main-wrapper" formArrayName="continuousType">
<div class="content-wrapper" *ngFor="let lineItem of continuousType().controls; let i=index"
[formGroupName]="i">
<div class="row list-wrapper">
<div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
<h5 class="topbar-items-text">Design Process Capacity (Tonnes)</h5>
<mat-form-field appearance="outline">
<input matInput type="text" class="line-fte-input smed-input" placeholder="Design Process Capacity"
formControlName="designProcess">
</mat-form-field>
<mat-error *ngIf="lineItem?.controls?.designProcess?.hasError('required')">
Field is required
</mat-error>
</div>
</div>
</div>
</div>
<!-- <--continuous Form start here -->
<!-- <--Batch Form start here -->
<div class="admin-console-main-wrapper" formArrayName="batchType">
<div class="content-wrapper" *ngFor="let lineBatchItem of batchType().controls; let i=index"
[formGroupName]="i">
<div class="row list-wrapper">
<div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
<h5 class="topbar-items-text">Average BCT (mins)</h5>
<mat-form-field appearance="outline">
<input matInput type="text" class="line-fte-input smed-input" placeholder="Average BCT"
formControlName="avgBCT">
</mat-form-field>
</div>
</div>
</div>
</div>
<!-- <--Batch Form ends here -->
</form>
</mat-tab>
</mat-tab-group>
</div>
</div>
您的对象对于关系选项卡和 FormArrays 来说很复杂，因此，假设您有一个更舒适的对象。有的喜欢
[{tabName:'Tab 1',continuousType:0,batchType:0},
{tabName:'Tab 2',continuousType:1,batchType:-1}]
看到你用“-1”表示标签没有这种类型的形式
为此创建一个函数 thah return 这个更舒适的数组
tabsConfig(obj:any){
const tab=[];
let continuousType=0;
let batchType=0;
obj.forEach((x,index)=>{
tab[index]={tabName:x.TabName,continuousType:-1,batchType:-1}
x.otherDetails.forEach(y=>{
if (y.processTechType=='Continuous')
tab[index].continuousType=continuousType++
if (y.processTechType=='Batch')
tab[index].batchType=batchType++
})
})
return tab
}
现在您可以使用变量来存储配置
this.tabs=this.tabConfig(this.myObj)
然后你就可以
this.tabs.forEach(x=>{
if (x.continuousType!=-1)
this.continuousType.push(this.createContinuousForm())
if (x.batchType!=-1)
this.batchType.push(this.createBatchForm())
})
并且，如果您有两个辅助表单，return FormArrays
的 formGroup
getContinuousForm(index:number){
return (this.dataCollectionForm.get("continuousType") as FormArray)
.at(index) as FormGroup
}
getBatchForm(index:number){
return (this.dataCollectionForm.get("batchType") as FormArray)
.at(index) as FormGroup
}
您已准备好创建迭代“制表符”数组的 mat-tab
<mat-tab-group >
<mat-tab *ngFor="let tab of tabs;let i=index">
<ng-template mat-tab-label>
<button >{{tab.tabName}}</button>
</ng-template>
<form *ngIf="tab.continuousType!=-1
[formGroup]="getContinuousForm(tab.continuousType)">
....
</form>
<form *ngIf="tab.batchType!=-1
[formGroup]="getBatchForm(tab.batchType)">
....
</form>
</mat-tab>
</mat-tab-group>
我有以下 JSON 回复。
根据 JSON 的响应，我正在创建动态选项卡，并且在每个选项卡中我想根据下面提到的条件推送 formArray。
**在下面的回复中，
const myObj = [
{
'TabName': 'Test1',
'otherDetails': [
{
'processTechType': 'Continuous'
},
{
'processTechType': 'Batch',
},
]
},
{
'TabName': 'Test2',
'otherDetails': [
{
'processTechType': 'Batch'
}
]
}
];
对于 Ex - TabName Test1 和 TabName Test2 是我动态显示的选项卡名称。现在在 Test1 选项卡中，我想推送 formArray Continuous 和 formArray Batch 这两种形式。因为在 Test1 选项卡中，我有连续和批处理的 processTechType 数组。所以它将在 Test1 选项卡中显示这两种形式。
Ex - 2 -- 现在在 Test2 选项卡中，我只想推送 formArray 批处理表单。因为在 Test2 选项卡中，我在 otherDetails 对象中有 processTechType 批处理。所以它只会在Test2 Tab中显示Batch形式。
我的意思是，每次它都会检查响应中的 Tabname 和 otherDetails 键，并仅在特定选项卡上显示基于 processTechType 数组键的表单。
我有以下代码。但它在所有选项卡中推送两种形式，而不是在特定选项卡上。例如 - 从我的代码中，它在 Test1 和 Test2 选项卡中显示一次 Continuous formArray 和 Batch formArray 两次。
预期输出 -
在Test1选项卡中，它会推送一个Continuous和一个Batch表单。
在Test2 Tab中，只会显示push batch form
任何人都可以帮助我让我的代码工作以获得预期的输出。
getMakeLineData() {
var otherDetails = myObj.filter(m => m.otherDetails).map(m => m.otherDetails);
this.makeLineData = myObj;
if (otherDetails) {
otherDetails.forEach(element => {
for (var i of element) {
if (i.processTechType === 'Continuous') {
this.addQuantity();
}
else if (i.processTechType === 'Batch') {
this.addBatch();
}
}
});
}
}
createContinuousForm() {
return this.fb.group({
designProcess: ['', [Validators.required]]
});
}
createBatchForm() {
return this.fb.group({
avgBCT: ['', [Validators.required]]
});
}
continuousType(): FormArray {
return this.dataCollectionForm.get("continuousType") as FormArray;
}
batchType(): FormArray {
return this.dataCollectionForm.get("batchType") as FormArray;
}
addQuantity() {
this.continuousType().push(this.createContinuousForm());
}
addBatch() {
this.batchType().push(this.createBatchForm());
}
HTML模板
<div class="tabGroupDiv row">
<div class="lossLinesDiv">
<mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
<mat-tab *ngFor="let lineData of makeLineData">
<ng-template mat-tab-label>
<button class="validatorTabBgClr">{{lineData.makeLineName}}</button>
</ng-template>
<form [formGroup]="dataCollectionForm" (ngSubmit)="onSubmit()">
<!-- <--continuous Form start here -->
<div class="admin-console-main-wrapper" formArrayName="continuousType">
<div class="content-wrapper" *ngFor="let lineItem of continuousType().controls; let i=index"
[formGroupName]="i">
<div class="row list-wrapper">
<div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
<h5 class="topbar-items-text">Design Process Capacity (Tonnes)</h5>
<mat-form-field appearance="outline">
<input matInput type="text" class="line-fte-input smed-input" placeholder="Design Process Capacity"
formControlName="designProcess">
</mat-form-field>
<mat-error *ngIf="lineItem?.controls?.designProcess?.hasError('required')">
Field is required
</mat-error>
</div>
</div>
</div>
</div>
<!-- <--continuous Form start here -->
<!-- <--Batch Form start here -->
<div class="admin-console-main-wrapper" formArrayName="batchType">
<div class="content-wrapper" *ngFor="let lineBatchItem of batchType().controls; let i=index"
[formGroupName]="i">
<div class="row list-wrapper">
<div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
<h5 class="topbar-items-text">Average BCT (mins)</h5>
<mat-form-field appearance="outline">
<input matInput type="text" class="line-fte-input smed-input" placeholder="Average BCT"
formControlName="avgBCT">
</mat-form-field>
</div>
</div>
</div>
</div>
<!-- <--Batch Form ends here -->
</form>
</mat-tab>
</mat-tab-group>
</div>
</div>
您的对象对于关系选项卡和 FormArrays 来说很复杂，因此，假设您有一个更舒适的对象。有的喜欢
[{tabName:'Tab 1',continuousType:0,batchType:0},
{tabName:'Tab 2',continuousType:1,batchType:-1}]
看到你用“-1”表示标签没有这种类型的形式
为此创建一个函数 thah return 这个更舒适的数组
tabsConfig(obj:any){
const tab=[];
let continuousType=0;
let batchType=0;
obj.forEach((x,index)=>{
tab[index]={tabName:x.TabName,continuousType:-1,batchType:-1}
x.otherDetails.forEach(y=>{
if (y.processTechType=='Continuous')
tab[index].continuousType=continuousType++
if (y.processTechType=='Batch')
tab[index].batchType=batchType++
})
})
return tab
}
现在您可以使用变量来存储配置
this.tabs=this.tabConfig(this.myObj)
然后你就可以
this.tabs.forEach(x=>{
if (x.continuousType!=-1)
this.continuousType.push(this.createContinuousForm())
if (x.batchType!=-1)
this.batchType.push(this.createBatchForm())
})
并且，如果您有两个辅助表单，return FormArrays
的 formGroupgetContinuousForm(index:number){
return (this.dataCollectionForm.get("continuousType") as FormArray)
.at(index) as FormGroup
}
getBatchForm(index:number){
return (this.dataCollectionForm.get("batchType") as FormArray)
.at(index) as FormGroup
}
您已准备好创建迭代“制表符”数组的 mat-tab
<mat-tab-group >
<mat-tab *ngFor="let tab of tabs;let i=index">
<ng-template mat-tab-label>
<button >{{tab.tabName}}</button>
</ng-template>
<form *ngIf="tab.continuousType!=-1
[formGroup]="getContinuousForm(tab.continuousType)">
....
</form>
<form *ngIf="tab.batchType!=-1
[formGroup]="getBatchForm(tab.batchType)">
....
</form>
</mat-tab>
</mat-tab-group>