Angular FormArray中的级联下拉列表

Question

我在每个 formArray 元素中有一个带有级联下拉列表的 formArray，如下所示：

当前行为：每当我选择产品属性时，相关属性值列表都会出现在两行的值列中。

例外行为：每当我选择产品属性时，相关属性值列表应该只出现在该行的值列中。

在 jQuery 中，我们可以通过使用 parent siblingss 选择器来解决这个问题，但是在 angular 中是否有类似的东西？

这是我的组件：

    export class ProductComponent implements OnInit {
             productAttributeValueSelectList: IProductAttributeValue[];

            ngOnInit() {
    this.createProductForm = this.formBuilder.group({
        productSpecifications: this.formBuilder.array([
        this.formBuilder.group({
          productAttributeId: [null, [Validators.required]],
          productAttributeValueId: [null, [Validators.required]],
          note: [null]
        })
    });
 }
        loadProductAttributeValueSelectListByAttributeId(productAttributeId: number): void {
            this.productAttributeValueSelectList = null;
            if (productAttributeId) {
              this.subscription = this.productAttributeValueService.getProductAttributeValueSelectListByAttributeId(productAttributeId).subscribe((productAttributeValueSelectList) => {
                this.productAttributeValueSelectList = productAttributeValueSelectList;
              }, (error) => {
                this.serverErrorMessage = this.errorMessageService.getServerErrorMessageText();
              });
            }
          }

            }

这是我的 Html：

<fieldset class="scheduler-border">
          <legend class="scheduler-border">Specification:</legend>
          <div style="overflow: auto">
            <table class="table table-sm table-bordered">
              <thead>
                <tr class="text-center">
                  <th>Attribute</th>
                  <th>Value</th>
                  <th>Note</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody formArrayName="productSpecifications">
                <tr *ngFor="let item of createProductForm.controls.productSpecifications.controls; let $index=index" [formGroupName]="$index">
                  <td style="min-width: 120px">
                    <div *ngIf="productAttributeSelectList">
                      <select class="form-control text-danger" *ngIf="productAttributeSelectList.length == 0; else productAttibuteListElseBlock">
                        <option class="text-danger" disabled>Product Attribute list is empty</option>
                      </select>
                      <ng-template #productAttibuteListElseBlock>
                        <select class="form-control"
                                (change)="loadProductAttributeValueSelectListByAttributeId(createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeId'].value)"
                                formControlName="productAttributeId">
                          <option [ngValue]="null">Select Product Attribute</option>
                          <option *ngFor="let productAttribute of productAttributeSelectList" [ngValue]="productAttribute.productAttributeId">{{productAttribute.productAttributeName}}</option>
                        </select>
                        <div class="text-danger" *ngIf="createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeId'].touched
                             && createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeId'].hasError('required')">
                          Please select Product Attribute!
                        </div>
                      </ng-template>
                    </div>
                  </td>
                  <td style="min-width: 120px">
                    <div *ngIf="productAttributeValueSelectList">
                      <select class="form-control text-danger" *ngIf="productAttributeValueSelectList.length == 0; else productTypeListElseBlock">
                        <option class="text-danger" disabled>Value list is empty</option>
                      </select>
                      <ng-template #productTypeListElseBlock>
                        <select class="form-control" formControlName="productAttributeValueId">
                          <option [ngValue]="null">Select Attribute Type</option>
                          <option *ngFor="let productAttributeValue of productAttributeValueSelectList" [ngValue]="productAttributeValue.productAttributeValueId">{{productAttributeValue.productAttributeValueName}}</option>
                        </select>
                        <div class="text-danger" *ngIf="createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeValueId'].touched
                             && createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeValueId'].hasError('required')">
                          Please select Attribute Value!
                        </div>
                      </ng-template>
                    </div>
                    <div *ngIf="!productAttributeValueSelectList" class="form-control text-danger">
                      Select Attribute first!
                    </div>
                  </td>
                  <td style="min-width: 140px">
                    <input formControlName="note" class="form-control" type="text"/>
                  </td>
                  <td style="width: 100px">
                    <button (click)="addCreateProductSpecificationRow()" class="btn btn-success btn-sm" type="button"><i class="fa fa-plus"></i></button>
                    <button (click)="removeCreateProductSpecificationRow($index)" class="btn btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

        </fieldset>

我们将不胜感激任何适当的解决方案！谢谢！

Answer 1

好吧，最后我自己以非常直接的方式解决了这个问题，如下所示：

在组件中：

export class ProductComponent implements OnInit {
  productAttributeValueSelectListArray: IProductAttributeValue[][]= [];


loadProductAttributeValueSelectListByAttributeId(productAttributeId: number, formIndex : number): void {
            this.productAttributeValueSelectListArray[formIndex] = null;
            if (productAttributeId) {
              this.subscription = this.productAttributeValueService.getProductAttributeValueSelectListByAttributeId(productAttributeId).subscribe((productAttributeValueSelectList) => {
                this.productAttributeValueSelectListArray[formIndex] = productAttributeValueSelectList;
              }, (error) => {
                this.serverErrorMessage = this.errorMessageService.getServerErrorMessageText();
              });
            }
     }

}

在 Html 中：

<td style="min-width: 120px">
                    <div *ngIf="productAttributeSelectList">
                      <select class="form-control text-danger" *ngIf="productAttributeSelectList.length == 0; else productAttibuteListElseBlock">
                        <option class="text-danger" disabled>Product Attribute list is empty</option>
                      </select>
                      <ng-template #productAttibuteListElseBlock>
                        <select class="form-control"
                                (change)="loadProductAttributeValueSelectListByAttributeId(createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeId'].value, $index)"
                                formControlName="productAttributeId">
                          <option [ngValue]="null">Select Product Attribute</option>
                          <option *ngFor="let productAttribute of productAttributeSelectList" [ngValue]="productAttribute.productAttributeId">{{productAttribute.productAttributeName}}</option>
                        </select>
                        <div class="text-danger" *ngIf="createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeId'].touched
                             && createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeId'].hasError('required')">
                          Please select Product Attribute!
                        </div>
                      </ng-template>
                    </div>
                  </td>


<td style="min-width: 120px">
          <div *ngIf="productAttributeValueSelectListArray[formIndex]">
                      <select class="form-control text-danger" *ngIf="productAttributeValueSelectListArray[formIndex].length == 0; else productTypeListElseBlock">
                        <option class="text-danger" disabled>Value list is empty</option>
                      </select>
                      <ng-template #productTypeListElseBlock>
                        <select class="form-control" formControlName="productAttributeValueId">
                          <option [ngValue]="null">Select Attribute Type</option>
                          <option *ngFor="let productAttributeValue of productAttributeValueSelectListArray[formIndex]" [ngValue]="productAttributeValue.productAttributeValueId">{{productAttributeValue.productAttributeValueName}}</option>
                        </select>
                        <div class="text-danger" *ngIf="createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeValueId'].touched
                             && createProductForm.controls['productSpecifications'].controls[$index].controls['productAttributeValueId'].hasError('required')">
                          Please select Attribute Value!
                        </div>
                      </ng-template>
           </div>
           <div *ngIf="!productAttributeValueSelectListArray[formIndex]" class="form-control text-danger">
                      Select Attribute first!
          </div>
   </td>