Angular 动态生成的选择字段，其中一个依赖于另一个

Question

我已经动态生成了选择字段。

1. 有 2 个选择字段。第一个：“类别”，第二个是：“对象”
2. 选择字段“对象”取决于“类别”的值。
3. 如果选择的类别是“动物”，则对象将仅显示：“狗”、“猫”、“狮子”
4. 如果选择的类别是“植物”，则对象将仅显示：“玫瑰”、“椰子”、“苹果”

这是有角度的 HTML

<div [formGroup]="inventoryForm">
    <div formArrayName="items">
        <div *ngFor="let items of inventoryForm.get('items')['controls']; let i=index">

            <div [formGroupName]="i">

      <select formControlName="category" class="form-control">
        <option selected></option>
        <option *ngFor="let a of allCategories">{{a.category}} </option>
      </select>

                <select formControlName="object" class="form-control">
        <option selected></option>
        <option *ngFor="let b of allObjects">{{b.name}} </option>
      </select>

            </div>
        </div>
    </div>
</div>
<button (click)="addItem()">Add</button>

这是component.ts：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
allObjects;
allCategories;

inventoryForm: FormGroup;
items: FormArray;

constructor(private formBuilder: FormBuilder) {}



ngOnInit() {

this.allObjects = [
{category: "Animal", name: "Dog"},
{category: "Animal", name: "Cat"},
{category: "Animal", name: "Lion"},
{category: "Plant", name: "Rose"},
{category: "Plant", name: "Coconut"},
{category: "Plant", name: "Apple"},
]

this.allCategories = [
{category: "Animal", },
{category: "Plant", }
]


  this.inventoryForm = new FormGroup({
    items: new FormArray([])
  });

}

createItem(): FormGroup {
  return this.formBuilder.group({
    category: '',
    object: '',
  });
}

addItem(): void {
  this.items = this.inventoryForm.get('items') as FormArray;
  this.items.push(this.createItem());
}
}

这是 stackblitz 链接： https://stackblitz.com/edit/angular-kgzsnu

Answer 1

You can change the code like below.

<select formControlName="object" class="form-control">
        <option selected></option>
        <option *ngFor="let b of allObjects">{{b.name}} </option>
      </select>

To

    <select formControlName="object" class="form-control">
          <ng-container *ngFor="let b of allObjects">
        <option *ngIf="b.category == items.get('category').value" >{{b.name}} </option>
          </ng-container>
      </select>

Answer 2

首先，您需要创建一个管道来过滤您的第二个选择对象。

import { Pipe, PipeTransform} from '@angular/core';

@Pipe({ name: 'type',  pure: false })
export class TypePipe implements PipeTransform {
  transform(allObjects: [{category:string,name:string}], filter: string): any {
    if(filter == ''){
      return null
    }
    return allObjects.filter(object => object.category == filter)
  }
}

然后将管道添加到您的*ngFor

<option *ngFor="let b of allObjects | type : getType(i)">{{b.name}}</option>

然后创建你的方法getType(i)

getType(index){
  let temp_items = this.inventoryForm.get('items') as FormArray;
  return temp_items.controls[index].get('category').value;
}

这里是working stackblitz