如何修复角度材料6中不同选项卡内的重复内容？

Question

    <form [formGroup]="cashflowForm">
          <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
            <mat-tab *ngFor="let tab of tab; let index = index" [label]="tab">
              <mat-tab-group>
                <mat-tab *ngFor="let tabz of tabs; let i=index " [label]="tabz.Name">
                  <div formArrayName="itemRows" *ngFor="let item of cashflowForm.get('itemRows').controls">
                    <div [formGroupName]="0">
                      <table>
                        <thead>
                          <tr>
                            <th>
                              Estimated Cash Flows Date
                            </th>
                            <th>
                              Principle Amount
                            </th>
                            <th>
                              Interest Amount
                            </th>
                            <th>
                              Total
                            </th>
                            <th>
                              PV of Estimated Cash Flows
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>
                              <input type="text" name="ECFDate" formControlName="ECFDate" />
                            </td>
                            <td>
                              <input type="text" name="principalFCValue" formControlName="principalFCValue" />
                            </td>
                            <td>
                              <input type="text" name="intrestCRecovery" formControlName="intrestCRecovery" />
                            </td>
                            <td>
                              <input type="text" name="cashflowtotal" formControlName="cashflowtotal" />
                            </td>
                            <td>
                              <input type="text" name="PVEstablishCash" formControlName="PVEstablishCash" />
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <table>
                        <tr>
                          <td> <a href="javascript:void(0);" (click)="addNewTab(tabz.id)">Add Row</a></td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </mat-tab>
              </mat-tab-group>
            </mat-tab>
          </mat-tab-group>
        </form>
        <router-outlet></router-outlet>





    


    
        import { Component } from '@angular/core';
        import { FormControl, FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
    
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css']
        })
        export class AppComponent {
          title = 'angularMaterialTask';
          public cashflowForm: FormGroup;
          tab = ['First', 'Second'];
          tabs = ['Inside First']
          selected = new FormControl(0);
          constructor(private fb: FormBuilder){}
          ngOnInit(){
             this.cashflowForm = this.fb.group({
               itemRows: this.fb.array([this.addItemRows()])
             });
          }
          addItemRows(): FormGroup{
            return this.fb.group({
              ECFDate: [''],
              principalFCValue: ['', Validators.required],
              intrestCRecovery: ['', Validators.required],
              cashflowtotal:    [''],
              PVEstablishCash: ['', Validators.required]
            });
          }
    
    
          addNewTab(){
              (<FormArray>this.cashflowForm.get('itemRows')).push(this.addItemRows());
    
          }
          removeTab(index: number) {
            this.tab.splice(index, 1);
          }
        }
    
    

我有一个包含两个主要选项卡的表单，第一和第二。我想在每个选项卡中添加一些控件，但是每个选项卡的内容可能相同也可能不同。 如何为每个标签添加动态内容。

现在代码正在运行。但它正在向两个选项卡添加控件。当我单击 AddRow 按钮时，它会添加控件，但它反映在所有选项卡（第一个和第二个）中。

下图描述相同。 enter image description here

Answer 1

您的目标是拥有动态表单，但是，如果您查看 HTML 模板，您会：

1. 使用 2 次 *ngFor 迭代静态数组（您的 addNewTab 不会更改您用于迭代的属性）。这是重复的根本原因。
2. 您的tab 和tabs 数组是静态的，并不是动态选项卡的真正来源。在删除操作时，您会删除它并为其编制索引，但在添加时您不会向这些数组添加新索引。
3. addTab 在FormArray 中添加了一个新的FormGroup，但呈现的表单字段没有收到正确的表单控件。

以下是您可以遵循的一些指导方针来实施它。

1. 定义Reactive Forms 的FormArray 并使用其项在模板中迭代和渲染。
2. 要呈现表单控件，请传递当前表单item 的formControl 属性而不是formControlName，这样您就可以将输入分配给等效的表单对象控件，并且能够检索稍后值。

阅读Dynamic Forms 指南对您来说也会很有趣。