如何基于Angular8中的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'
              }
            ]
          }
        ];

for Ex-TabName Test1和TabName Test2是我动态显示的选项卡名。现在在Test1选项卡中，我想要按下Form数组连续和Form数组批处理这两个表单。因为在Test1选项卡中，我有一个包含Continue和Batch两个元素的ProcessTechType数组。因此它将在Test1选项卡中同时显示这两个窗体。

Ex-2--现在在Test2选项卡中，我只想推送Form阵列批处理表单。因为在Test2选项卡中，我在其他Detail对象中有了ProcessTechType批处理。因此它将仅在Test2选项卡中显示批次表单。

我的意思是，每次它都将检查响应中的Tabname和其他Details键，并仅在特定选项卡上显示基于ProcessTechType数组键的表单。

我有以下代码。但它在所有选项卡中都推送这两个表单，而不是在特定的选项卡上。对于我的代码中的ex-from，它在Test1和Test2两个选项卡中都显示了一次连续Form数组和两次批处理Form数组。

预期产量-

在Test1页签中，将推送一张连续表单和一批表单。

在测试2页签中，将仅显示推式批次表单。

有人能帮助我完成代码工作以获得预期的输出吗？

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>

推荐答案

您的对象对于RelationalTab和FormArray来说很复杂，因此，假设您有一个更舒适的对象。有些像

[{tabName:'Tab 1',continuousType:0,batchType:0},
 {tabName:'Tab 2',continuousType:1,batchType:-1}]

请注意，您使用"；-1"；来指示该选项卡没有此类型的表单

为此创建一个函数，该函数将返回这个更合适的数组

  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())
})

和，如果有两个辅助表单返回FormArray的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
}

您已经准备好创建在&q；选项卡和数组上迭代的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>

这篇关于如何基于Angular8中的API生成动态数据页签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！