Angular2 嵌套 ngFor

2024-01-18

我需要做一个等价的Angular2:

<?php
foreach ($somethings as $something) {
    foreach ($something->children as $child) {
        echo '<tr>...</tr>';
    }
}

这可以通过以下方式实现吗ngFor并且不在之间添加新元素<table> and <tr>?


我有一个示例,可能与您想要的类似:

<table id="spreadsheet">
    <tr *ngFor="let row of visibleRows">
        <td class="row-number-column">{{row.rowIndex}}</td>
        <td *ngFor="let col of row.columns">
            <input  data-id="{{col.rowIndex}}-{{col.columnIndex}}" [value]="col.cellValue" (input)="col.cellValue = $event.target.value" (click)="model.selectColumn(col)" (keyup)="navigate($event)" />
        </td>
    </tr>
</table>

我用它来呈现一个电子表格网格,如下所示:http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

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

Angular2 嵌套 ngFor 的相关文章

  • Angular2 快速入门教程打破 Karma 测试 - “无法绑定到‘ngModel’,因为它不是‘输入’的已知属性。”

    我正在遵循官方 Angular Hero 快速入门教程 同时尝试 TDD https angular io docs ts latest tutorial toh pt1 html https angular io docs ts late
  • 如何在菜单中显示用户名

    我有一个 user name 我的 app component ts 中的变量 我想用它来显示用户登录后从本地存储获取的用户名 但这仅在应用程序启动时加载 我想在用户登录后重新加载它 当我在登录后关闭并重新打开应用程序时 它工作正常并显示用
  • ng run project:deploy - 项目目标不存在

    我有一个 Angular Web App 的工作生产版本 我的 Azure 帐户 免费套餐 上有一个有效订阅 其中包含 AppService 计划 应用服务 资源组 存储帐户 KeyVault SQL Server 和 SignalR 我想
  • “mat-card” 不是 Angular 7 中的已知元素

    我看到了很多关于此的问题 但似乎与我遇到的问题不同 我刚刚创建了我的第二个角度项目 我下面有一个新组件src app employees我试图在employees component html 中使用 我收到的错误是 Uncaught Er
  • 单元测试 HttpClientModule 时出错(Angular 4.3+)

    我正在探索新的 Angular HttpClientModule 并遇到莫名其妙的错误 该模块足够新 我还找不到任何有关如何进行单元测试的有用信息 并且官方文档没有任何示例 该应用程序包含一个具有一种方法的服务 该方法将 URL 传递给ht
  • 带有 angular-cli 的 SVG 图标系统

    我有一个 Angular2 项目 它是通过 Angular CLI 创建的 在 webpack 中 有一个加载器来加载 svg sprite 并从 svgs 列表生成该 sprite 但是 当 angular cli 不允许我更改 webp
  • router.navigate 更改 URL,但不渲染组件

    而不是使用 a href my path my param a 在我的模板中 我愿意使用带参数的函数将我重定向到页面 所以 这就是我在 ts 文件中构建函数的方式 redirectToChat my param this router na
  • 是否可以在 Ionic 2 中存储 firebase 数据并以离线模式运行应用程序功能?

    我找到了一些关于 Ionic 2 离线模式 firebase 的教程 但我仍然不知道如何在我的应用程序中启用这个功能 那么 firebase真的支持离线模式吗 如果是 我可以存储所有收到的数据吗 and 在离线模式下运行功能 firebas
  • 如何在 Angular 2 Material Autocomplete 中获取所选项目的值

    我使用 Angular Material 创建了一个自动完成字段 并成功从 Web api 获取国家 地区列表 CountryID gt 项目值 或索引 国家 地区 gt 项目文本 当我尝试获取所选项目的值 而不是文本 时 它会按预期返回文
  • 配置 htaccess 以使用 Angular 和 PHP 路由

    我正在尝试使用 Angular 4 和 PHP 路由 但我无法配置它以便同时使用两者 我可以让它与其中之一一起工作 但不能同时与两者一起工作 这是我的文件夹结构 root index html vendor bundle js other
  • ionic 2 google 图表未捕获类型错误:(void 0) 不是函数

    error 我想添加谷歌图表并按照这个https www npmjs com package angular2 google chart https www npmjs com package angular2 google chart 但
  • 如何按顺序使用 RxJS 可观察量?

    事情是这样的 我有一个 HTTP get 请求 它返回一个 JSON 对象列表 我使用 RxJS 订阅接收该列表的数据 现在 对于该列表中的每个对象 我想执行另一个 HTTP 请求 然后将该请求的结果放入数组中 到目前为止 我已经能够做到这
  • Angular Material Table:自定义排序文件夹和文件项

    我的里面有不同类型的物品mat table 文件和文件夹 它们必须像在 Microsoft 文件资源管理器中一样进行排序 文件夹不能与文件夹分开 同样也不能与文件分开 所有其他排序规则保持不变 有谁知道如何解决这个问题 先感谢您 您必须覆盖
  • 类型错误:无法读取未定义的属性“post”

    嗨 我只想使用一个简单的功能 http post 将我的日期发布到页面 我希望服务器能够获取我发布的日期 import Component OnInit from angular core import MarginServcies fro
  • Angular 7 向原语添加扩展方法

    我想向原语添加一些方法 我有以下文件 字符串扩展 ts interface String isNullOrEmpty this string boolean String prototype isNullOrEmpty function t
  • 如何为角度中的备用列添加背景颜色

    我使用角度材料垫桌子组件创建了一个简单的角度桌子 使用下面的样式我可以为备用行着色 但是当我将下面的样式中的行更改为列时 这不适用于列 mat row nth child even background color f2f4f7 mat r
  • Angular2 和 lodash...找不到名称

    Angular2 和 lodash 为什么有这么多戏剧性的事情 我的意思是真的 下面是我的安装方法 npm install save lodash npm install save types lodash UPDATE 我按照博客做了这个
  • 如何在 d3 中使用SimulationLinkDatum和SimulationNodeDatum

    我在使用SimulationLinkDatum 类型时遇到问题 我创建了两个类 Node 和 Link 来实现SimulationNodeDatum 和SimulationLinkDatum 当我尝试使用SimulationLinkDatu
  • Angular2 - 更改位置而不触发路线

    我有一个使用服务来加载项目列表的视图 我总是只显示一个项目 并使用 gt 按钮在项目之间移动 有没有办法在不触发 Angular 路由系统的情况下更改浏览器地址栏中的地址并将记录添加到浏览器历史记录中 我知道如果我使用 location g
  • For-each 在 ionic2 和 angularjs2 中

    我用 IONIC 2 Beta 版本制作了一个应用程序 我想用for each环形 是否可以在 Angular V2 中使用每个 Thanks 首先在Component 您必须声明要显示的数组 import Component from a

随机推荐