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

【问题标题】：I want to display data in second select box when i select first select box from API url json data当我从 API url json 数据中选择第一个选择框时，我想在第二个选择框中显示数据
【发布时间】：2019-04-02 21:42:43
【问题描述】：

我在 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。

【问题讨论】：

好的。但这里没有问题。有什么事情没有按预期工作吗？如果是这样，控制台中会产生什么错误？
甚至部门第一个选择框什么也没有显示.. 在控制台中显示 ERROR TypeError: Unable to get property 'value' of undefined or null reference
您需要使用*ngIf 隐藏details 选择，直到dept 选择有值。

标签： html forms angular7 angular-reactive-forms

【解决方案1】：

尝试为您所需的功能编写基本代码 sn-p。试试这个，希望能帮到你。谢谢

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>

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

【讨论】：