Как связать ответ API (json) с раскрывающимся списком в Angular4

Question

Я работаю в приложении angular4, мне нужно привязать раскрывающийся список к данным ответа API.

Я не знаю, как извлечь определенные данные для определенного раздела из API.

Здесь API содержит данные категорий, групп и подгрупп. Каждая группа имеет 2 подгруппы.

Я создал для этого файл stackblitz. Пожалуйста, посмотрите

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-y6iknh?file=app%2Fapp.component.ts

Здесь я получаю ответ API, но не знаю, как назначить значения для позиций раскрывающегося списка.

Может ли кто-нибудь направить меня к решению этой проблемы?

Answer 1

Вам нужно связать данные с некоторой переменной, проанализировав ее в json(), тогда вы сможете получать и использовать данные в вашем представлении, как это

 ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
      data => {
        this.dropdownData = data.json();
                  console.log(data.json());
      });


<div class="col-sm-12" style="margin-top: 20px !important" *ngFor='let data of dropdownData; let i=index'>
    <div class="col-sm-12 opt1">
        <div class="row">
            <h5>
                <a class="col-sm-12 font-weight-normal">
          {{data?.CAMD_ENTITY_DESC}}
        </a> 
            </h5>
            <i class="fa fa-angle-down ind" data-toggle="collapse" [attr.href]="'#collapseExample' + data?.CAMD_ENTITY_DESC"></i>
        </div>
    </div>
    <div class="col-sm-12 collapse opt1" [id]="'collapseExample' + data?.CAMD_ENTITY_DESC"
  *ngFor='let group of data?.group; let j=index'>
        <div class="row">
            <h6>
                <p class="dropdown-item col-sm-10">{{group?.CAMD_PRGRP_DESC}} </p>
            </h6>
            <i class="fa fa-angle-down ind arrow" data-toggle="collapse" [attr.href]="'#innerCollapse' + group?.CAMD_PRGRP_DESC"></i>
        </div>
    <div class="collapse col-sm-12" [id]="'innerCollapse' + group?.CAMD_PRGRP_DESC">
        <div class="row" *ngFor='let subgroup of group?.subgroup; let i=index'>
            <h6>
                <a class="dropdown-item opt">{{subgroup?.CAMD_PRSGRP_DESC}}</a>
            </h6>
        </div>
    </div>
    </div>
</div>

Вот рабочий пример для того же

• https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-y2qnjy?file=app/app.component.html