Angular 在“添加多行”的被动形式中，根据一个选择框的更改获取相关值

我想用添加更多功能创建相关下拉列表。我尝试了以下代码：

基本上，这应该是流程：

在选择类型时，名称值将位于与所选类型相关的第二个下拉列表中

在选择名称值时，将列出与所选名称相关的描述值

有多行，所有行都有自己的类型、名称和描述值。问题是，当我使用3个下拉列表中的所有值完成第一行选择，然后单击

添加更多

，然后在第二行中选择type以更改名称值，但它也会更改第一行值。它不应更改第一行的值

---

根据添加的行，我不知道如何执行此操作，而且所有值都是从API填充的，因此我无法在stackblits中调用API。

我必须确保您的名称列表和描述列表不是字符串数组，否则是对象（*）数组，所以我想象类似的情况

this.nameList = [
 {id:1,typeId:1,name:"Name 1"}, 
 {id:2,typeId:1,name:"Name 2"},
 {id:3,typeId:2,name:"Name 1"}
];
this.descList = [
 {id:1,nameId:1,desc:"Description 1"}, 
 {id:2,nameId:1,desc:"Description 2"},
 {id:3,nameId:2,desc:"Description 3"}
];

所以很容易“过滤”选项。但是在宣布一个getter进入正式队列之前

  get uomArray()
  {
    return this.productForm.get('uom') as FormArray
  }

并更改函数以添加新的FormGroup

  addmore() {
    this.uomArray.push(
      this.uom()
    );
  }

看看.html是如何变成的。“formArrayName”单独在一个div中，[formGroupName]=“i”在您迭代的div中，您得到数组的“value”作为

uomArray.value[i]。键入
i删除类以更清楚地显示代码

<form name="productForm" autocomplete="off" [formGroup]="productForm">
  <div formArrayName="uom">
    <div *ngFor="let item of uomArray.controls; let i = index"
      [formGroupName]="i">
      {{i+1}}
      <select formControlName="type">
        <option *ngFor="let list of typeList" [value]="list.tyopeId">
             {{ list.typeName }}
         </option>
      </select>
      <select formControlName="name">
        <ng-container *ngFor="let list of nameList">
          <option *ngIf="list.typeId==uomArray.value[i].type" [value]="list.id">
            {{ list.name }}</option>
          </ng-container>
        </select>
        <select formControlName="desc">
          <ng-container *ngFor="let list of descList">
            <option *ngIf="list.nameId==uomArray.value[i].name" [value]="list.id">
              {{ list.desc }}
            </option>
          </ng-container>
        </select>
      </div>
    </div>
</form>

您可以使用pie async对观察值进行迭代

<select formControlName="name">
  <option *ngFor="let item of names$[i]|async">{{item}}</option>
</select>
<select formControlName="desc">
  <option *ngFor="let item of descriptions$[i]|async">{{item}}</option>
</select>


{{item}}
{{item}}
事实上，我确信我得到的名称列表和描述列表是字符串数组，但是，当使用服务更改类型和名称的值时，您收到的值不是这样的吗？。我更新了答案，添加了此案例。我将尝试这两种方法，并让您知道状态。谢谢你的帮助！！嘿，你的第一个答案能在选择类型时填充吗？因为我希望名称和描述值依赖。e、 g.首先单击“添加更多”，然后类型列表将始终存在，现在让我们假设我选择类型，因此根据所选类型填充名称列表，现在我选择名称，因此根据名称填充所选描述。希望你能理解这个流程！！我可以在后端要求更改您的第一个答案的api响应。我将使用第一个选项，将在后端要求更改响应。谢谢你的帮助。
<select formControlName="name">
  <option *ngFor="let item of names$[i]|async">{{item}}</option>
</select>
<select formControlName="desc">
  <option *ngFor="let item of descriptions$[i]|async">{{item}}</option>
</select>