0

我正在处理角度材料中的嵌套选择，这两个选择的数据位于 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"
            }
        ]
]

我正在使用一个事件来保持学院或地区的价值，接下来我有另一个选择，显示之前选择的学院或地区的部门或中心，它应该但我可以完成它，这就是我做了：

<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)
  }
4

2 回答 2

1

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

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

于 2021-09-02T18:05:57.657 回答
0

为了完成它，我在打字稿文件中修复了一些东西。我意识到只需要教职员工服务并指向教职员工，我就可以获得一系列部门。

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>
于 2021-09-06T17:05:08.813 回答