Angular Material 从服务嵌套 Select

Question

我正在 angular material 中嵌套 select，这两个 select 的数据在 json 文件中：

[
    {
        "id": 1,
        "name": "Arquitectura",
        "depcen": [
            {
                "name": "Diseño"
            },
            {
                "name": "Informatización"
            },
            {
                "name": "Tecnología"
            },
            {
                "name": "CEU"
            },
            {
                "name": "Idiomas"
            }
        ]
    },
    {
        "id": 2,
        "name": "Automática y Biomédica",
        "depcen": [
            {
                "name": "Automática"
            },
            {
                "name": "Física"
            },
            {
                "name": "CEBIO"
            }
        ]
]

我正在使用一个事件来保持教员或地区的价值，接下来我有另一个 select 显示教员或地区的部门或中心 select ，它应该，但我可以完成它，这就是我所做的：

<mat-form-field class="select" appearance="fill">
  <mat-label>Facultad o Área</mat-label>
    <mat-select (selectionChange)="select($event.value)">
       <mat-option>-Sin especificar-</mat-option>
       <mat-option *ngFor="let facultadarea of facultadareas" 
        [value]="facultadarea.name">
         {{facultadarea.name}}
       </mat-option>                
    </mat-select>                
</mat-form-field>
<mat-form-field class="select" appearance="fill">
    <mat-label>Departamento o Centro</mat-label>
    <mat-select (selectionChange)="select($event.value)">
       <mat-option>-Sin especificar-</mat-option>
       <mat-option *ngFor="let depcen of depcentros" 
         [value]="depcen.name">
                    {{depcen.name}}
       </mat-option>
     </mat-select>
</mat-form-field>

这是我在打字稿中的功能：

facultadareas: IFacultadArea[] = []
depcentros: Idepcen[] = []

constructor(private facAreaService: FacultadAreaService) {}

ngOnInit() {
    this.facAreaService.getFacultadArea().subscribe(data=>this.facultadareas = data)
    this.facAreaService.getDepartamentoCentro().subscribe(data=>this.depcentros = data)
  }

select(value){
    this.depcentros = value.depcentros
    console.log(value.depcentros)
  }

Answer 1

在 (selectionChange) 中，您传递值...但值只是名称 [value]="facultadarea.name".

尝试为可能产生问题的部门设置 [value]="facultadarea" 并删除第二个（选择更改）。

Answer 2

为了完成它，我修复了打字稿文件中的一些内容。我意识到只需要教员服务并指向教员我可以获得部门的数组。

facultadareas: IFacultadArea[] = []
depcentros: Idepcen[] = []

constructor(private facAreaService: FacultadAreaService) {}

ngOnInit() {
    this.facAreaService.getFacultadArea().subscribe(data=>this.facultadareas = data) //I only needed this service

select(value){
    this.depcentros = value.depcen //depcen is the faculty field in the json that have its departments
    console.log(value.depcen)
  }

在 HTML 我按照朋友 Den 的建议做了，我设置了 [value]="facultadarea" 并删除了部门的第二个（选择更改）

<mat-form-field class="select" appearance="fill">
   <mat-label>Facultad o Área</mat-label>
   <mat-select (selectionChange)="select($event.value)">
     <mat-option>-Sin especificar-</mat-option>
     <mat-option *ngFor="let facultadarea of facultadareas" [value]="facultadarea">
                    {{facultadarea.name}}
     </mat-option>
   </mat-select>
</mat-form-field>
<mat-form-field class="select" appearance="fill">
   <mat-label>Departamento o Centro</mat-label>
   <mat-select>
     <mat-option>-Sin especificar-</mat-option>
     <mat-option *ngFor="let depcen of depcentros" [value]="depcen.name">
                    {{depcen.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

Angular Material 从服务嵌套 Select

Angular Material Nested Select from service

json

angular

angular-material

nested-select