如何将API响应(json)绑定到Angular4中的下拉列表 [英] How to bind API response (json) to drop-down in Angular4

问题描述

我正在使用angular4应用程序，因此我需要绑定API响应数据中的下拉列表.

I am working in an angular4 application in this I need to bind a drop-down from API response data .

我不知道如何从API获取特定部分的特定数据.

I don't know how to fetch the specific data for the particular section from API.

这里的API包含类别，组和子组数据.每个组有2个子组.

Here API contains Category ,Group and Sub-group data .Each Group has 2 sub-groups.

我为此创建了一个stackblitz文件，请看一下

I have created a stackblitz file for this Please take a look

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

我在这里收到API响应，但是不知道如何将这些值分配给下拉位置.

Here I receiving the API response ,But don't know how to assign the values to the dropdown positions.

任何人都可以指导我解决此问题..

Can anyone guide me to solve this ..

推荐答案

您需要将数据与某些变量绑定，方法是将其解析为json()，这样便可以像这样将数据获取并消费到视图中

You need to bind data with some variable by parsing it into json() , then you will be able to fetch and consume data into your view like this

 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

这篇关于如何将API响应(json)绑定到Angular4中的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！