与 Angular 中的动态选择选项相同的方法，这可能吗？

Question

我有一个动态数组，它在选择选项上有一个 onChange 方法。当我选择该选项时，该方法有效，但是当我添加新数组并选择新选项时，第一个数组将重置。这是我的数组：

  <ng-container formGroupName="envelopeRequest">
    <button (click)='initDocument()'>Add Document</button>
    <ng-container formArrayName="documents">
      <ng-container
        *ngFor="let control of documents.controls; let comIndex=index"
      >
        <ng-container [formGroupName]="comIndex">
          <div class="row justify-content-start mb-3">
            <div class="col-md-1">
              {{comIndex}}
              <input
                type="hidden"
                id="fname"
                name="fname"
                formControlName="documentId"
              />
              <label for="formFile" class="col-form-label">File:</label>
            </div>
            <div class="col-md-6">
              <input
                class="form-control"
                type="file"
                id="file"
                name="file"
                formControlName="name"
              />
            </div>
          </div>
          <ng-container formArrayName="documentFields">
            <ng-container
              *ngFor="let skillIndex of documentFieldsIndexes(comIndex);"
            >
              <div class="row mb-3">
                <label class="col-sm-1 col-form-label">Category:</label>
                <div class="col-md-2">
                  <ng-container [formGroupName]="skillIndex">
                    <select id="" class="form-select" formControlName="value"  (change)="changeCategoryList($event)">
                      <option selected>Select</option>
                      <option *ngFor="let c of categoryList">
                        {{c.name}}
                      </option>
                    </select>
                  </ng-container>
                </div>

                <label class="col-auto col-form-label">Sub-Category:</label>
                <div class="col-md-2">
                  <ng-container [formGroupName]="skillIndex + 1">
                    <select id="" class="form-select" formControlName="value" (change)="changeSubCategoryList($event)">
                      <option selected>Select</option>
                      <option *ngFor="let s of subCategoryList">{{s.name}}</option>
                    </select>
                  </ng-container>
                </div>
                <label class="col-auto col-form-label">List:</label>
                <div class="col-md-2">
                  <ng-container [formGroupName]="skillIndex + 2">
                    <select id="" class="form-select" formControlName="value">
                      <option selected>Select</option>
                      <option *ngFor="let name of typeList">{{name}}</option>
                    </select>
                  </ng-container>
                </div>
              </div>
            </ng-container>
          </ng-container>
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-container>

我假设这是因为两个选择选项现在都使用相同的方法。这是我的 ts 代码片段：

 changeCategoryList(category: any) {
    this.subCategoryList = this.categoryList.find(
      (cat: any) => cat.name == category.target.value
    ).subCategoryList;
  }

  changeSubCategoryList(subList: any) {
    this.typeList = this.categoryList
      .find((cat: any) => cat.name == this.selectedCategoryList)
      .subCategoryList.find(
        (stat: any) => stat.name == subList.target.value
      ).typeList;
  }

是否可以对方法建立索引？这是完整代码的链接

堆栈闪电战

Answer 1

从 HTML 中，您将在

subCategoryList

documentSubCategory

中的

FormGroup

之间共享

documents

选择选项的

FormArray

实例。

您应该为每个

FormGroup

创建/使用单独的实例，以避免在另一个

documentSubCategory

中选择

FormGroup

时覆盖该值。

使用

comIndex

确定数据选择列表是否属于哪个

FormGroup

。你的

subCategoryList

将是一个多维数组，根据

comIndex

序列保存子类别数据选择的相应数据。这个概念与

documentType

选择相同。

subCategoryList: Array<any[]> = [];
typeList: Array<any[]> = [];

changeCategoryList(category: any, comIndex: number) {
  this.subCategoryList[comIndex] = this.categoryList.find(
    (cat: any) => cat.name == category.target.value
  ).subCategoryList;
}

changeSubCategoryList(subList: any, comIndex: number) {
  let selectedCategory = this.documentFields(comIndex).get('0')?.get('value')?.value;
      
  this.typeList[comIndex] = this.categoryList
    .find((cat: any) => cat.name == selectedCategory)
    .subCategoryList.find(
      (stat: any) => stat.name == subList.target.value
    ).typeList;      
}

添加

document

时，您应该向

subCategoryList

和

typeList

数组添加一个新的空数组。

newDocument() {
  this.subCategoryList.push([]);
  this.typeList.push([]);

  return this.fb.group({
    name: new FormControl(''),
    documentId: new FormControl(''),
    documentFields: this.fb.array([]),
  });
}

对于 HML，您需要向

comIndex

和

changeCategoryList

方法提供

changeSubCategoryList

。并使用

subCategoryList[comIndex]

和

typeList[comIndex]

检索相应的选择选项。

<select id="" class="form-select" formControlName="value"  (change)="changeCategoryList($event, comIndex)">
  <option selected>Select</option>
  <option *ngFor="let c of categoryList">
    {{c.name}}
  </option>
</select>

<select id="" class="form-select" formControlName="value" (change)="changeSubCategoryList($event, comIndex)">
  <option selected>Select</option>
  <option *ngFor="let s of subCategoryList[comIndex]">{{s.name}}</option>
</select>

...

<select id="" class="form-select" formControlName="value">
  <option selected>Select</option>
  <option *ngFor="let name of typeList[comIndex]">{{name}}</option>
</select>

演示@StackBlitz