当我 select 第一个 select 框来自 API url json 数据时，我想在第二个 select 框中显示数据

Question

我在 assets/file 中有 json 文件。json.I 使用反应形式 method.I 想在 [=35] 时在第二个下拉列表中显示详细信息（仅名称） =]ing department.I 已经在第一个下拉列表中显示了部门 down.but 在第二个下拉列表中什么也没有看到。

[
    {
        "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>

我想在 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;
}

当我 select 第一个 select 框来自 API url json 数据时，我想在第二个 select 框中显示数据

I want to display data in second select box when i select first select box from API url json data

html

forms

angular-reactive-forms

angular7