首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用*ngFor结构指令时会显示额外的td元素

在Angular中,ngFor结构指令用于循环渲染一组元素。当使用ngFor结构指令时,有时可能会出现显示额外的td元素的情况。

这通常是由于在*ngFor指令所在的HTML模板中,没有正确地设置表格结构或者迭代的数据源存在问题导致的。

要解决这个问题,首先需要确保表格结构是正确的。确保<table>标签包含<thead>、<tbody>和</table>等必要的表格标签,确保每行的单元格都在<tr>标签中,并且在每一行中都有相同的列数。

另外,检查迭代的数据源是否正确。确保数据源是一个数组,并且数组中的每个元素都包含与表格中的列对应的属性。例如,如果表格有两列,那么数据源中的每个元素应该有两个属性。

以下是一个使用*ngFor结构指令的示例,用于循环渲染一个包含姓名和年龄的简单表格:

代码语言:txt
复制
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

在这个例子中,通过*ngFor指令将people数组中的每个元素渲染为一个<tr>元素,其中包含两个<td>元素,用于显示姓名和年龄。

对于腾讯云相关产品,推荐使用云服务器(CVM)来托管Angular应用程序。云服务器是腾讯云提供的灵活、高性能、可扩展的云计算基础设施,可满足各种规模和需求的应用程序部署。您可以通过以下链接了解更多关于腾讯云云服务器的信息:

请注意,以上只是示例答案,具体的答案可能会根据实际情况和需求有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-结构指令

但是如果没有一个令人信服理由让他们保持身临其境,你应该首先去除用户看不到DOM元素,并用像NgIf这样结构指令来恢复未使用资源。 这些相同考虑适用于每个结构指令,无论是内置还是定制。...您仅可以将一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂事情。 当两个指令声明相同宿主元素时,哪一个优先? NgIf或NgFor应该先走哪一个?...这个用例有一个简单解决方案:将*ngIf放在包裹*ngFor元素容器元素上。 一个或两个元素可以是一个temple,所以你不必引入额外HTML级别。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase值与switch值匹配时,会显示宿主元素。...兄弟元素组 根元素通常能且应该成为结构指令宿主,列表元素()是NgFor迭代典型宿主元素

16.1K20
  • AngularDart4.0 指南- 表单 顶

    你还没有使用Angular。 没有绑定或额外指令,只是布局。 在模板驱动表单中,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定到powers列表。...每个input元素都有一个ngControl指令,Angular表单需要用这个指令在表单上注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?...NgForm指令补充表单元素附加功能。 它包含用ngModel和ngControl指令元素创建控件,并监视它们属性,包括它们有效性。...用于验证和表单元素更改跟踪NgControl 指令。 输入控件(通过模板引用变量访问)valid 属性,用于检查控件有效性以及显示/隐藏错误消息。

    17.5K30

    AngularDart4.0 指南- 模板语法一 顶

    内置指令 内置属性指令       NgClass       NgStyle       NgModel ([(ngModel)]) 内置结构指令      NgIf      NgFor          ...一些合法HTML在模板中没有多大意义。 ,和元素没有用处。 剩下一切都是一致。 您可以使用组件和指令出现元素和属性来扩展模板HTML词汇表。...如果引用这些名称空间名称,则模板变量名称优先,后面是指令上下文,最后是组件成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。...但是它也与你习惯HTML有很大不同。 它需要一个新心智模式。 在HTML开发正常过程中,您可以使用HTML元素创建一个可视结构,并通过使用字符串常量设置元素属性来修改这些元素。...它在显示它们之前清理这些值。 它不允许带脚本标记HTML泄露到浏览器中,既不能使用插值也不能使用属性绑定。 <!

    5.2K10

    AngularDart4.0 指南- 模板语法二 顶

    内置结构指令 结构指令负责HTML布局。 它们通常通过添加,删除和操作它们所连接主机元素来对DOM结构进行调整或重塑。...“结构指令”指南介绍了结构指令深入细节,您将在其中学习以下内容: 为什么必须在指令名称前加上前缀星号(*)。 当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。...为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM中添加或删除元素NgFor:为列表中每个项目重复一个模板。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板为列表中每个英雄创建一组新元素和绑定。 在“结构指令”指南中了解微语法。...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代中项目的从零开始索引。 您可以捕获模板输入变量中index,并在模板中使用它。

    30K20

    Angular2 之 结构指令几个概念

    (* 与 template) 控制宿主元素模板。 在哪里去显示,viewcontain 怎么注入,属性set语法使用,是便捷监听属性值变化途径。...Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构指令 组件 组件其实就是一个带模板指令。...结构指令 结构指令通过添加和删除 DOM 元素来改变DOM布局。 我们经常看到内置结构指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。...总结 基于上面的利弊分析,无论是我们在使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。...标签 结构指令,比如ngIf,使用HTML 5template标签 完成它们“魔法”。 控制Template标签内DOM添加与显示,在模板级别使用

    3K20

    ng-content 中隐藏内容

    有时你只需要将其包装在额外容器中即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你内部组件不是包装器直接子节点。...为了解决这个问题,我们必须使用 ngProjectAs 属性,它可以应用于任何元素上。...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...The solution 为了让包装器能够控制其子元素实例化,我们可以通过两种方式完成:在我们内容周围使用 元素,或者使用带有 “*” 语法结构指令。...让我们再验证一下 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let

    2.7K30

    AngularDart4.0 英雄之旅-教程-04明细 顶

    -- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中英雄列表绑定到模板,迭代它们,并单独显示它们。...它表示元素及其子元素构成一个主模板。 ngFor指令遍历组件英雄列表并为该列表中每个英雄呈现该模板一个实例。...刷新浏览器,该应用程序不再失败,名称列表再次显示在浏览器中。 当没有选定英雄时,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示在列表下方时,很难在列表中识别选定英雄。...您将Hero类移到lib / src下自己文件中。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

    3K30

    Angular快速学习笔记(3) -- 组件与模板

    ="let hero of heroes"> {{ hero.name }} ` 在模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性...*ngFor 是 Angular “迭代”指令。... 小结 带有双花括号插值表达式 (interpolation) 来显示一个组件属性 用 ngFor 显示数组 用一个 TypeScript 类来为你组件描述模型数据并显示模型属性 用 ngIf...在正常 HTML 开发过程中,你使用 HTML 元素来创建视觉结构, 通过把字符串常量设置到元素 attribute 来修改那些元素。.../app.component.scss'] }) 6.属性指令 在 Angular 中有三种类型指令: 组件 — 拥有模板指令 结构指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令

    15.3K30

    Angular 中结构指令模式 - 它们是什么且怎么使用

    在 Angular 中,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。...要使用结构指令,我们需要在 HTML 模版中添加一个带有指令元素。然后根据我们在指令中设置条件或者表达式添加、删除或者替换元素结构指令例子 我们添加些简单 HTML 代码。...*ngFor 指令 我们使用 *ngFor 指令来遍历数组。...Angular 中我们什么时候需要用结构指令呢? 如果你想在 DOM 中添加或者移除一个元素时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。...甚至可以使用它们来创建一个之前不存在元素。 最好规则是:当我们正在考虑操作 DOM 时候,那么是时候使用结构指令了。

    3.8K20

    Angular 显示英雄列表

    元素,以显示单个 hero 属性。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...主从结构 当用户在主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 在本节,你将监听英雄条目的点击事件,并更新英雄详情。...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

    4.4K70

    angular知识点梳理第二篇-基本语法

    angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中v-model效果是一致,只是写法会有一些区别,vue中是可以直接进行使用...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和css中display:none效果是一致,和visibility...运行效果 如果这个tag标签不太理解,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑时候但是不知道使用什么元素标签时候就可以使用这个,在html任何场景下都可以使用!...官方的话:为没有 DOM 元素指令安排宿主 管道 管道其实就是具有一定功能函数,主要是一些场景是对字符串什么进行简单转化,当然我们也可以自己使用自定义函数进行数据转换,只是angular给我们提供了一些初始化功能函数管道详细列表

    2.5K30

    Angular 显示英雄列表

    元素,以显示单个 hero 属性。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...主从结构 当用户在主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 在本节,你将监听英雄条目的点击事件,并更新英雄详情。...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

    4K30

    Angular 2 架构(下)

    数据绑定(Data binding) 数据绑定为应用程序提供了一种简单而一致方法来显示数据以及数据交互,它是管理应用程序里面数值一种机制。...每种形式都有一个方向——从 DOM 来、到 DOM 去、双向,就像图中箭头所示意。 插值 : 在 HTML 标签中显示组件值。... {{title}} 属性绑定: 把元素属性设置为组件中属性值。...保存 双向绑: 使用Angular里NgModel指令可以更便捷进行双向绑定。...在Angular中包含以下三种类型指令: 属性指令:以元素属性形式来使用指令结构指令:用来改变DOM树结构 组件:作为指令一个重要子类,组件本质上可以看作是一个带有模板指令

    2.2K20
    领券