如何使用 *ngFor 迭代对象键

2024-05-14

我想在 Angular 2 中使用 *ngFor 迭代 [object object]。

问题是该对象不是对象的数组,而是包含更多对象的对象的对象。

{

  "data": {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "03215110224",
    "role": null,
    "email": "[email protected] /cdn-cgi/l/email-protection",
    "picture": **{ <-- I want to get thumb: url but not able to fetch that**
      "url": null,
      "thumb": {
        "url": null
      }
    },
    "address": "Nishtar Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "[email protected] /cdn-cgi/l/email-protection"
  }
}

我知道我们可以使用管道来迭代对象,但是我们如何进一步从一个对象迭代到另一个对象意味着数据->图片->thum:url.


角 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25 https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25

介绍了一个KeyValuePipe

也可以看看https://angular.io/api/common/KeyValuePipe https://angular.io/api/common/KeyValuePipe

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

original

您可以使用管道

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}
<div *ngFor="let key of objs | keys">

也可以看看如何使用 *ngFor 迭代对象键? https://stackoverflow.com/questions/37046138/how-to-use-ngfor-with-object/37046743#37046743

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 *ngFor 迭代对象键 的相关文章

  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https
  • Typescript Map 在使用其函数时抛出错误(mapobject.keys() 不是函数)

    我是 typescript 中的新蜜蜂 在我的 angular4 项目中 我收到一个 json 形式的地图对象 所以我声明了一个如下所示的类
  • Angular 2 链式 Promise 并传递拒绝

    应该是一个简单的问题 但是我找不到有关如何做到这一点的文档 像这样链接一个承诺 Making a promise no problem let promise new Promise resolve reject gt let data d
  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任
  • 在“FormGroup”中预填充输入字段 - Angular2

    我正在使用 Angular2 反应形式 一切正常 直到我想在表单中的字段之一中显示预填充的值 设想 页面上有多个按钮 每个按钮都会打开一个表单 其中的字段如下 Name Email Message 产品代码 gt 此值应根据服务中的每个项目
  • 如何使 Angular2 Service 单例?

    我正在尝试在我的应用程序中实现身份验证防护 IE 只有经过身份验证的用户才能访问我的应用程序的某些路由 我正在遵循给出的意见here https angular io docs ts latest guide router html 用户登
  • 在 angular2 中过滤数组

    我正在研究如何在 Angular2 中过滤数据数组 我研究过使用自定义管道 但我觉得这不是我想要的 因为它似乎更适合简单的表示转换 而不是过滤大量数据 数组排列如下 getLogs Array
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 如何禁用 Angular 样式指南的 tslint 规则:“选择器应以 为前缀”?

    我对某些使用该指令的组件进行了 Angular 测试ngb pagination from ng 引导程序 https ng bootstrap github io home 现在 在我的测试中 我模拟这个组件如下 on next line
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • 角度+ firebase auth +材料=路由器崩溃

    Firebase 身份验证后路由器无法正常工作 问题来自 angular animations 导入 NoopAnimationsModule 或 BrowserAnimationsModule 路由器无法正常工作 包 json depen
  • 使用 ngx-translate 时更改 URL

    当有人使用 ngx translate 单击所选语言时 我尝试更改 URL 我想我应该通过订阅语言更改事件然后修改当前的 url 以反映所选的语言来做到这一点 因为我是新手 所以我不确定是否需要服务来做到这一点 或者可能是另一种解决方法 我
  • Angular2 RC6 禁用输入

    以前在我的 Angular2 RC5 应用程序中 我有一个如下所示的输入元素
  • Angular HTML 绑定

    我正在编写一个 Angular 应用程序 并且有一个想要显示的 HTML 响应 我怎么做 如果我只是使用绑定语法 myVal 它对所有 HTML 字符进行编码 当然 我需要以某种方式绑定innerHTML of a div到变量值 正确的语
  • 如何禁用 Angular 2 中的复选框

    我想禁用复选框输入 我的意思是 用户无法选中复选框 有一个属性可以禁用它吗 例如 启用 或 禁用 或者我该如何解决这个问题
  • 如何断点和调试角度模板?

    例如 在 React 中 您可以在视图 模板中放置一个断点并检查发生了什么 编辑 假设我想看看这里发生了什么 h2 hero name uppercase Details h2 div span id span hero id div di
  • 使用 ngFor 的内联样式背景图像

    我正在尝试为 ngFor 循环中的每个 div 设置背景图像 在我循环的 JSON 中 我有一个属性property Image包含图像的 url 字符串 img src flag properties Image 有效 但我尝试将图像显示
  • npm install 的问题(Angular)

    今天我尝试创建一个新项目 所以我使用这个命令 ng new NAME style less 并在我的cmder中弹出错误和警告 所以我卸载了 Roaming npm 和 npm cache 中的节点和文件 然后我安装了node并再次下载cm
  • Jasmine 测试中的模板解析错误,但实际应用程序中没有错误

    我开发了 Jasmine 规范来测试 Angular 2 组件MiddleRowComponent 当我运行 jasmine 测试时 出现以下错误 zone js 388 Unhandled Promise rejection Templa
  • Ionic 2 RC0 和 Angular 2 最新的 Android 构建错误(ngc:错误:静态解析符号值时遇到错误)

    当我使用构建android时出现错误ionic build android命令 ngc 错误 静态解析符号值时遇到错误 引用本地 非导出 符号 字典 考虑导出符号 原始 ts文件中的位置14 8 解析符号TRANSLATION PROVID

随机推荐

  • Azure VM 自定义脚本扩展 SAS 令牌支持

    我正在尝试使用 ARM 模板将自定义脚本扩展部署到 Azure VM 并且希望让它使用 SAS 令牌从存储帐户下载文件 这是模板 简化 name CustomScriptExtension type Microsoft Compute vi
  • relativelayout导致动画不起作用?

    我有一个活动 其布局仅包含一个 VideoView 这是 XML
  • AllowAnonymous 与 OverrideAuthorizeAttribute

    AllowAnonymous 和 OverrideAuthorizeAttribute 的使用有什么区别 是一样的吗 http www asp net web api overview security authentication and
  • 确定向量中是否存在元素的最有效方法

    我有几种算法取决于确定元素是否存在于向量中的效率 在我看来 这 in 这相当于is element 应该是最有效的 因为它只返回一个布尔值 在测试了几种方法之后 令我惊讶的是 这些方法是迄今为止效率最低的 以下是我的分析 随着向量大小的增加
  • 编辑 Kafka Listener Spring 应用程序以更改阶段/目标

    我可以利用另一个运行 Kafka 应用程序 代码库的团队来使用相同的数据 将其加载到我们的新暂存表中 而不是他们的 他们在 Messages 文件夹中有许多不同的 kafka 侦听器适配器 java 文件 每个文件消耗不同类型的数据 每个
  • & 在 xml 文件中算作一个还是多个字符?

    我正在使用的 XML 模式具有特定的字符串字符长度 所以我可能有一个类似的字符串 Jim Mary 在 C 中是 10 个字符 但是当它写入 xml 时 它会变成 Jim amp Mary 如果 XML 模式规定字符串最多只能有 10 个字
  • 获取本周的第一天和最后一天

    如何获取本周的第一天和最后一天 我需要的是某种方法来过滤一组具有 NSDate 属性的对象 只留下本周出现的对象 然后按天过滤它们 我还需要一些方法来获取本地化的日期名称 我尝试使用 NSCalendar NSDate 和 NSDateCo
  • 避免在 Angular 2+ 中嵌套订阅?

    我有2个端点 1 个端点来获取当前用户的日志 1 个端点来获取该用户的授权 实际上我使用 this user subscribe e gt this grants get e subscribe x gt console log x 但这是
  • 如何使用 ArangoJs 将文档存储在 ArangoDb 图中?

    我正在使用 Nodejs 应用程序中的最新版本的 ArangoDb 和 ArangoJs 我有以下两个顶点 users tokens tokens顶点包含向其中一个用户发出的安全令牌users顶点 我有一个名为的边缘定义token belo
  • JavaScript 中的“import”和“require”有什么区别?

    当在 JavaScript 中包含包时我什么时候想使用import vs require 它们是相同的还是有不同的用例 您可以在加载的模块名称未预定义 静态的情况下进行动态加载 或者仅在 真正需要 时有条件地加载模块 取决于某些代码流 加载
  • 为什么vcredist_x86.exe不能安静安装?

    我需要安静地安装 vcredist x86 exe Microsoft Visual C 2010 Redistributable Package 我在 cmd exe 上输入 vcredist x86 exe q 但是 vcredist
  • R 中的转换会导致文档错误

    每当我运行此代码时 tm map 行都会给我警告消息 警告信息 在 tm map SimpleCorpus docs toSpace 中 转换删除文档 texts lt read csv Data fast food Domino s Do
  • VBscript 以提升的权限运行 bat 文件

    这是我的bat文件 REG DELETE HKLM Software Microsoft Windows CurrentVersion WindowsUpdate v SusClientId f REG DELETE HKLM Softwa
  • 无法使用 datastax java 驱动程序通过 UDT 密钥从 cassandra 检索

    我正在尝试使用用户定义的类型作为分区键将对象存储在 cassandra 中 我正在使用 datastax java 驱动程序进行对象映射 虽然我能够插入到数据库中 但无法检索该对象 如果我更改分区键以使用非 udt 例如文本 我就能够保存和
  • 如何调用向导来添加新的项目模板

    我有一个通过向导生成的项目模板 现在我想通过同一个向导添加一个新的项目模板 添加新项目模板时如何调用向导 Example Add to Project Template Wizard Form Add the new Item Templa
  • VOIP通话录音

    我正在开发一个在 android 中录制 VOIP 通话的项目 我没有找到任何解决方案 有很多应用程序支持手机上的 VOIP 录音 我找不到任何教程和帮助 立方体通话记录器 https play google com store apps
  • Woocommerce 中的欧洲 GDPR 附加结帐验证复选框

    您好 我一直在尝试向我的 Woocommerce 结帐页面添加一个额外的条件复选框 该复选框与条款和条件相同 但包含有关新 GDPR 数据保护 的信息以及指向我的隐私政策的链接 他们必须在方框中打勾才能结帐 我一直在使用从此处找到的各种代码
  • 如何在 ASP.NET 中实现 PayPal Express Checkout? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我如何在 ASP NET 中创建快速
  • 如何检索分配给 Django 中的组的所有权限

    我正在执行一项任务来检索分配给 Django 中的组的一组权限 我可以使用以下代码获取创建的组 但无法使用它来获取分配给它们的权限 from django contrib auth models import Group Permissio
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0