Я хочу отображать данные во втором окне выбора, когда я выбираю первый блок выбора из данных API JSON URL

Question

У меня есть файл json в assets / file.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;
}