Angular Formarray选择下拉问题

Question

当我更改标准时（根据选择的标准，选择的选项中的数据将更改）我可以选择option。但是当我更改一个条件时添加了更多行之后，它会更改all选项，并在所有行中选择下拉菜单

这里是我的问题的链接：https://stackblitz.com/edit/stackoverflow-49722349-6pvgkh

预期的行为：当我选择标准时，仅该行选项需要更改，不会影响其他行选项。

Answer 1

检查此stackblitz以获取工作示例。

<form [formGroup]="profileForm">

    <h1>Profile Form</h1>

    <div>
        <label for="first-name-input">First Name</label>
        <input type="text" id="first-name-input" formControlName="firstNameInput">
  </div>

  <div>
        <label for="last-name-input">Last Name</label>
        <input type="text" id="last-name-input" formControlName="lastNameInput">
  </div>

    <div formArrayName="optionGroups">

        <div *ngFor="let $optionGroup of profileForm.controls['optionGroups'].controls;  let $index=index">

            <h4>Option {{ $index + 1 }} </h4>

            <div [formGroupName]="$index"> 
                <label for="select-input">Criteria</label>

                <select id="{{ 'select-input' + $index }}" formControlName="selectInput">
          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects" [value]="select.name">{{select.id}}</option>
        </select>

                <label [for]="'where-input-' + $index">Option</label>
                <select [id]="'where-input-' + $index" formControlName="whereInput">
          <option value="0" disabled selected>Select a Option</option>
          <option *ngFor="let where of getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)" [value]="where.name">
            {{where.id}}
          </option>
        </select>

                <button type ="button" (click)="removeOptionGroup($index)">X</button>

            </div>

        </div>

    </div>

  <button type="button" (click)="addOptionGroup()">Add Options</button>

  <div>
        <button type="button" (click)="saveProfileForm()">Send</button>
  </div>

</form>

<pre>
{{ profileForm.value | json }}
</pre>

重要的是，一旦选择了“条件”，则应使用此功能刷新“选项”的列表：

  getWheresFor(inputStr: string): Where[] {
    return this.dropdownservice
      .getWhere()
      .filter(item => item.selectid === inputStr);
  }

从您的html这样调用：

getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)"

此外，您也可以使用$optionGroup变量来缩短表达式：

getWheresFor($optionGroup.controls['selectInput'].value)"

Answer 2

检查此stackblitz以获取工作示例。

<form [formGroup]="profileForm">

    <h1>Profile Form</h1>

    <div>
        <label for="first-name-input">First Name</label>
        <input type="text" id="first-name-input" formControlName="firstNameInput">
  </div>

  <div>
        <label for="last-name-input">Last Name</label>
        <input type="text" id="last-name-input" formControlName="lastNameInput">
  </div>

    <div formArrayName="optionGroups">

        <div *ngFor="let $optionGroup of profileForm.controls['optionGroups'].controls;  let $index=index">

            <h4>Option {{ $index + 1 }} </h4>

            <div [formGroupName]="$index"> 
                <label for="select-input">Criteria</label>

                <select id="{{ 'select-input' + $index }}" formControlName="selectInput">
          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects" [value]="select.name">{{select.id}}</option>
        </select>

                <label [for]="'where-input-' + $index">Option</label>
                <select [id]="'where-input-' + $index" formControlName="whereInput">
          <option value="0" disabled selected>Select a Option</option>
          <option *ngFor="let where of getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)" [value]="where.name">
            {{where.id}}
          </option>
        </select>

                <button type ="button" (click)="removeOptionGroup($index)">X</button>

            </div>

        </div>

    </div>

  <button type="button" (click)="addOptionGroup()">Add Options</button>

  <div>
        <button type="button" (click)="saveProfileForm()">Send</button>
  </div>

</form>

<pre>
{{ profileForm.value | json }}
</pre>

重要的是，一旦选择了“条件”，则应使用此功能刷新“选项”的列表：

  getWheresFor(inputStr: string): Where[] {
    return this.dropdownservice
      .getWhere()
      .filter(item => item.selectid === inputStr);
  }

从您的html这样调用：

getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)"