Angular *ngFor 循环遍历数组的数组

2024-05-14

我有一个数组,其中包含其他数组,如下所示:

array = [
           ["element A", "element B"],
           ["YES", "NO"]
        ]

我想使用 ngFor 循环遍历 HTML 表中的这个对象数组:

   <table>
     <thead>
       <tr>
         <th>#</th>
         <th>COLUMN 1</th>
         <th>COLUMN 2</th>
       </tr>
     </thead>

     <tbody>
       <template *ngFor="let row of csvContent; let in = index">
         <th scope="row">{{in}}</th>
            <template *ngFor="let c of row; let in = index">
              <td>
               {{c[0]}}
              </td>
            </template>
       </template>
     </tbody>
  </table>

我想分别显示 COLUMN1 和 COLUMN2 下面的每个内部数组列表:

 COLUMN1   | COLUMN2
 --------------------
 element A | YES
 element B | NO

我不知道如何正确使用 *ngFor 来列出数组的数组(简单的字符串列表)。目前,它要么是一个空数组,要么是一个移位且混乱的表格演示。

该表的外观如下:

或者这个错误的表示,因为元素 A 和 B 应该位于 COLUMN 1 下方,而 YES、NO 应该位于 COLUMN2 下方:


你的数据不是数组中的数组;这是两个连接的数组。您需要这样对待它:

   <tbody>
     <tr *ngFor="let column of csvContent[0]; let in = index">
       <td>
         {{csvContent[0][in]}}
       </td>
       <td>
         {{csvContent[1][in]}}
       </td>
     </tr>
   </tbody>

这并不是组织数据的好方法,因为内容并不真正相关。如果什么csvContent[0]获得一个新条目,但 1 没有?现在,您的数据并不代表表格,我建议您在控制器中将其转换为表格,然后打印。

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

Angular *ngFor 循环遍历数组的数组 的相关文章

  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 按第一列排序二维数组,然后按第二列排序

    int arrs 1 100 11 22 1 11 2 12 Arrays sort arrs a b gt a 0 b 0 上面的数组已排序为 1 100 1 11 2 12 11 22 我希望它们按以下方式排序a 0 b 0 首先 如果
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 从 pygame 获取 numpy 数组

    我想通过 python 访问我的网络摄像头 不幸的是 由于网络摄像头的原因 openCV 无法工作 Pygame camera 使用以下代码就像魅力一样 from pygame import camera display camera in
  • Fortran 子例程返回错误值

    嘿 我正在开发一个 Fortran 程序 遇到了一个奇怪的问题 当我尝试在调用特定子例程之前直接输出数组的某些值时 我得到了正确的值 然后 我尝试在启动子例程时输出同一数组的一些值 它们都是 0 我最终在子例程之后输出数组的值 并且这些值回
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • C# 证书生成框架

    有谁知道可以生成公钥 私钥 X 509 证书并签署这些证书的 C 框架 BouncyCastleCrypto 虽然这个名字很疯狂 但我很确定它具有所有这些功能 几乎所有 RFC 标准均已实施 当我几年前使用它时 它的文档记录很少 但是单元测
  • ElasticSearch 映射对分组文档进行折叠/执行操作的结果

    有一个对话列表 每个对话都有一个消息列表 每条消息都有不同的字段和action场地 我们需要考虑到在对话的第一条消息中使用了动作A 在几条消息之后有使用的动作A 1过了一会儿A 1 1等等 有一个聊天机器人意图列表 对对话的消息操作进行分组
  • 从图像坐标获取对象的世界坐标

    I have been following this http docs opencv org modules calib3d doc camera calibration and 3d reconstruction html docume
  • 使用 cfchart 标签在单个饼图中显示多个查询的数据

    请考虑以下代码 现在我的代码中有以下代码 cfm页面内的 tag DataSource xx xx x xx Name of the database sgemail Name of the relevant column event vc
  • 如何通过我的 ios 应用程序的指示打开苹果地图应用程序

    我的目标是从 ios 应用程序打开带有方向的地图应用程序 我可以打开地图应用程序 但它没有显示方向 我编写的代码如下 NSString mystr NSString alloc initWithFormat http maps apple
  • 使用无图像按钮有哪些优点?

    讨论关于这个答案 https stackoverflow com questions 520640 how can i use googles new imageless button how could i reverse enginee
  • 警告变量值

    如何在警报框中显示 javascript 中变量的值 例如 我有一个变量 x 100 并且alert x 不起作用 油脂猴中使用的脚本在这里 var inputs document getElementsByTagName input va
  • PHP实现的机票预订系统

    如何防止预订系统中的座位被重复预订 我正在用 PHP 和 MYSQL 制作一个航空旅行预订系统模型作为一个项目 我有一个小问题 仅在付款后 门票和座位详细信息才会永久存储在此处 座位号在付款前分配 假设人 1 预订了飞机上的座位 x 并支付
  • 连接外部 Accumulo 实例和 java

    我正在尝试使用 Accumulo 连接到虚拟机 问题是 我无法将其连接到 Java 中 我可以看到 Apache 抛出的网页 但我无法让它与代码一起工作 我认为这是缺乏知识的问题而不是真正的问题 但我找不到这方面的文档 所有示例都使用 lo
  • Ioncube 编码的文件是否可以解码?

    我是一名 php 开发人员 我的客户计划分发一个使用 Php 开发的软件 计划使用 ioncube 或类似软件对文件进行编码 在谷歌搜索时 我发现很少有人解码这些文件 这些文件使用 ioncube 甚至其他软件进行编码 如果您询问是否可以破
  • getappdata 在 MATLAB 中返回空矩阵

    我有一段代码 我在其中使用setappdata然后我使用以下方式调用数据getappdata即使它不为空 它也会返回一个空矩阵 我的一段简化代码如下 function edit1 Callback hObject eventdata han
  • 在哪里可以获得几乎所有英语单词的列表? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我想生成一些随机文本 我尝试写一个基本的Java程序 int nowords r nextInt 2000 int i j for i 0
  • Windows 上的 Node.js 和 Express

    今晚 我决定尝试在我的 Windows 7 计算机上使用 Express 构建一个简单的 Node js 应用程序 安装过程还算顺利 但 Express 拒绝配合 以下是我已采取的步骤 使用以下位置提供的 MSI 安装 Node jshtt
  • 处理聚合的所有事件

    请参阅下面我的第一个持久订阅 namespace PersistentSubscription internal class Program private static void Main var subscription new Per
  • 使用 InlineKeyboardButton python telegram bot 发送命令

    在Python电报机器人中 是否有可能InlineKeyboardButton发送类似命令 cancel当它被按下时 例如 当用户按下取消按钮时 他们将自动发送 cancel 命令 然后由机器人处理 从这里的例子来看 https githu
  • 作为对象访问 vue-i18n 消息

    我想创建一个取决于页面的动态滑块 security signin slide1 Kitten1 slide2 Kitten2 signup slide1 Kitten1 slide2 Kitten2 slide3 Kitten3 问题是我想
  • flutter web http.get 返回“不支持的操作:Platform._version”

    我正在开发 flutter web 应用程序并尝试从互联网获取一些数据 我正在使用包 http http dart 并尝试这样做 await http get url 但我得到了这个错误 不支持的操作 Platform version da
  • Mapkit 在 IOS 13 中使用过多的 CPU

    最近 在一些用户更新到 iOS 13 x 后 我的 iOS 应用程序开始频繁崩溃 在 iOS 12 x 中没有出现该问题 我正在使用 Mapkit 渲染一些 MKPolygons 和 MKPolylines MKPolylines 被删除并
  • 使用 JPA 标准 API 进行日期比较

    我有一个包含两个日期的范围日期选择器 start and end 其中两者都可以为空 我想过滤一张表 其中实体具有确切的一个日期 date 所以 这里有一些例子 我愿意匹配 想象要匹配的日期是当前日期 17 07 2016 空 17 07
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th