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;
}

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

1 个答案: