当我从 API url json 数据中选择第一个选择框时，我想在第二个选择框中显示数据

Question

我在assets/file.json中有json文件，我使用了反应式表单方法。我想在选择部门时在第二个下拉列表中显示详细信息(仅名称(。我已经在第一个下拉列表中显示了部门，但在第二个下拉列表中看不到任何内容。

[
    {
        "DEPT": "PHYSICS",
        "details": [
        {
            "id": 164,
            "name": "A",

        },
        {
            "id": 265,
            "name": "B",
        }
        ]
    },
    {
        "DEPT": "BIOLOGY",
        "details": [
        {
            "id": 155,
            "name": "C",
        },
        {
            "id": 234,
            "name": "D",
        }
        ]
    }
]

我所做的是...

第一个下拉菜单....................

<select  formControlName="dept">
                      <option value="default">--Select a dept--</option>
                      <option *ngFor="let d of departments$" [value]="d.DEPT"> {{d.DEPT}} </option>
                  </select>

第二个下拉列表......................

<select formControlName="details">
              <option value="0">--All--</option> 
     <option *ngFor="let d of dept.value" [value]="d.details.name"> {{d.details.name}} </option> -->
          </select>

我想在选择生物学部门时显示，第二个下拉列表应显示名称 C，D。

Answer 1

尝试为所需的功能编写一个基本代码片段。试试这个，希望它能帮助你。谢谢

.HTML

<select (change)="checkDepart($event.target.value)">
  <option value="default">--Select a dept--</option>
  <option *ngFor="let d of data; let i = index" [value]="i"> {{d.DEPT}} </option>
</select>
<select *ngIf="visibleDetail">
  <option value="0">--All--</option> 
  <option *ngFor="let d of data[selectedDept].details" [value]="d.name"> {{d.name}} </option> 
</select>

TS

visibleDetail: boolean;
selectedDept: number;
data = [
  {
     "DEPT": "PHYSICS",
     "details": [
        {
           "id": 164,
           "name": "A",
        }, {
            "id": 265,
            "name": "B",
        }
      ]
 }, {
    "DEPT": "BIOLOGY",
    "details": [
       {
           "id": 155,
           "name": "C",
       }, {
           "id": 234,
           "name": "D",
       }
        ]
    }
]
checkDepart(e) {
  this.visibleDetail = true;
  this.selectedDept = e;
}