如何将 API 响应(json)绑定到 Angular4 中的下拉菜单

2024-01-21

我正在 Angular4 应用程序中工作,我需要绑定 API 响应数据的下拉列表。

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

这里API包含类别、组和子组数据。每个组有2个子组。

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

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

这里我收到了API响应,但不知道如何将值分配给下拉位置。

谁能指导我解决这个问题..


您需要通过将数据解析为来将数据与某个变量绑定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 https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-y2qnjy?file=app/app.component.html
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 API 响应(json)绑定到 Angular4 中的下拉菜单 的相关文章

随机推荐

  • OpenCV 从采集卡或 OBS Studio FaceRecogition 加载视频

    我正在创建一个概念证明 我有一个闭路电视设置 我可以访问的唯一输出是 HDMI 端口 我可以使用采集卡或 OBS 作为 openCV 的输入吗 使用带有 PiCam 的树莓派 所以我对功能的限制有点迷失 这对我使用 USB HDMI 采集卡
  • 如何在 DOS 汇编中正确挂接中断 28h 并恢复它?

    我试图将中断28h的处理程序设置为我自己的例程 恢复所有涉及的寄存器和标志 并恢复原始的中断处理程序 我在 VirtualBox 中的 DOSBox 和 MS DOS 6 22 下使用 NASM Assembler 我考虑过调试 但在 TS
  • 如何用渐变填充 UIBezierPath?

    我使用 UIBezierPath 绘制了一个图表 我可以用纯色填充图表下方的区域 但我想用渐变而不是纯色填充图表下方的区域 但我不确定如何使渐变仅适用于图表而不适用于整个视图 我已经阅读了一些问题 但没有发现任何适用的内容 这是主要的绘图代
  • 如何使用 django-tables2 从字典创建表

    我有一个如下所示的字典列表 set u meal 0 08 35 882945 set 0 u personal set 0 u sleep set 0 u transport set 0 u work 我做的 u meal u perso
  • AWS lambda函数-“发生错误:收到来自Lambda的错误响应:已处理”

    致力于AWS Lex用于创建 ChatBot 并使用Node js in AWS Lambda 错误 发生错误 收到来自 Lambda 的错误响应 已处理 拉姆达函数 var aws require aws sdk var ses new
  • 会话、HTTP 连接之间的区别?

    我一直在阅读this https stackoverflow com questions 20763999 how does http keep alive work lq 1 and this http www javaworld com
  • DDD 用户安全策略

    我有一个租赁财产类 看起来像这样 class RentalProperty Money MonthlyRent List
  • 用 C 实现的 UNIX 命令

    对于我的操作系统课程 我有一个作业 该作业是建立在之前作业的基础上的 不幸的是 除了我不知道下一个项目需要从哪里开始之外 我之前的项目无法正常工作 我下面的代码假设模仿一个简单的 UNIX Linux shell 其中包含一些无法使用 ex
  • .bind('input', function(){}) 在 IE8 中不起作用

    我一直在使用 bind input 使用 jQuery 因为它似乎是检测它们是否复制 粘贴到框中 或者只是键入然后从浏览器给定的下拉菜单中选择的最佳解决方案 我与其他人的问题 例如change 至少对我来说 它们只有在用户失去对盒子的注意力
  • 概率和百分比的解释

    非常感谢您帮助编写我的模型 如果您不介意的话 我想问您一些编码中的解释 抱歉我不是数学专家 to move ask turtles with gender male if random float 1 lt 0 025 为什么它是 和百分比
  • 在 Shopware 产品列表页面上显示评论计数

    我想要产品列表页面 如产品详细信息页面 上产品评论的总计数 如何在列表页面上获取该计数 这并不是那么微不足道的事情 您需要编写一个插件来实现此目的 在你的插件中你需要创建订阅者 https developer shopware com do
  • 在 matplotlib 中添加颜色条时出现属性错误

    以下代码无法在 Python 2 5 4 上运行 from matplotlib import pylab as pl import numpy as np data np random rand 6 6 fig pl figure 1 f
  • Bash:从文件读取标准输入并将标准输出写入文件

    我正在尝试运行一个应用程序 假设top 因此它将从标准输入的文件中读取并从标准输出写入另一个文件 目前我有 mkfifo stdin pipe tail f stdin pipe top 其按预期工作 然后我就可以echo该文件的内容和顶部
  • 添加 facebook 库后 gradle 错误 DexException

    在我在 gradle 依赖项中添加 fb 库后 dependencies compile com mixpanel android mixpanel android 4 5 2 compile com android support mul
  • VS Code Python 安装和 Python 解释器无法识别

    我在 VS Code 上收到此消息 Python is not installed Please download and install python before using the extension 也没有 Python Inter
  • 创建静态库时嵌入所有外部引用

    我需要为 C 代码创建一个包装器库来包装我的 C 库 有没有一种方法可以创建该包装器库 使得用户只需要链接该包装器库 而不必在链接器命令行上包含所有 C 库 我的测试项目的结构如下所示 lib cpp print cc print h li
  • 适用于 iOS 和 Android 的经典蓝牙包可能吗?

    After learning https stackoverflow com questions 64417509 basic flutter bluetooth questions一般而言 正确了解 BLE 和蓝牙后 我决定使用经典蓝牙来
  • 玩法 2:将表单绑定到 List[Model] 的惯用方法

    我有几个 CRUD 操作要执行 每个操作都针对一组模型 例如比赛日程 球队名单 比赛结果 比赛统计数据等 到目前为止 在我的 Play 体验中 仅几个月 有 1 个项目上线 我一直在使用一对一表单绑定到模型实例 我知道我可以对表单字段名称进
  • ggplot在pdf中嵌入字体

    我一直在使用以下指南来导出用ggplotto pdf 绘图字体指南 http zevross com blog 2014 07 30 tired of using helvetica in your r graphics heres how
  • 如何将 API 响应(json)绑定到 Angular4 中的下拉菜单

    我正在 Angular4 应用程序中工作 我需要绑定 API 响应数据的下拉列表 我不知道如何从 API 获取特定部分的特定数据 这里API包含类别 组和子组数据 每个组有2个子组 我为此创建了一个 stackblitz 文件 请看一下 h