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

如何在使用Angular 2的*ngFor创建表时隐藏列

在使用Angular 2的*ngFor创建表时隐藏列,可以通过使用CSS样式来实现。以下是一种常见的方法:

  1. 首先,在HTML模板中,使用*ngFor指令来循环遍历表格的数据,并为每个表头和表格单元格绑定相应的数据。
代码语言:txt
复制
<table>
  <thead>
    <tr>
      <th *ngFor="let column of columns" [hidden]="column.hidden">{{ column.title }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td *ngFor="let column of columns" [hidden]="column.hidden">{{ item[column.field] }}</td>
    </tr>
  </tbody>
</table>
  1. 在组件的代码中,定义一个包含列信息的数组,并设置每个列的隐藏属性。
代码语言:txt
复制
export class YourComponent {
  columns = [
    { title: 'Column 1', field: 'field1', hidden: false },
    { title: 'Column 2', field: 'field2', hidden: true },
    { title: 'Column 3', field: 'field3', hidden: false },
    // 添加更多的列...
  ];

  items = [
    { field1: 'Value 1', field2: 'Value 2', field3: 'Value 3' },
    // 添加更多的数据...
  ];
}
  1. 在CSS样式文件中,为隐藏的列添加相应的样式。
代码语言:txt
复制
th[hidden], td[hidden] {
  display: none;
}

这样,当列的hidden属性为true时,对应的表头和表格单元格将被隐藏起来,实现了在使用Angular 2的*ngFor创建表时隐藏列的效果。

对于Angular开发者来说,*ngFor是一个非常常用的指令,用于循环遍历数据并生成相应的HTML元素。通过结合CSS样式和组件中的属性,可以轻松实现隐藏列的功能。这种方法适用于各种类型的表格,例如数据展示、报表生成等场景。

腾讯云提供了云计算相关的产品和服务,例如云服务器、云数据库、云存储等,可以根据具体需求选择相应的产品。具体的产品介绍和使用方法可以参考腾讯云官方文档:腾讯云产品与服务

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

相关·内容

Angular 6.x 快速入门

ngFor 指令简介 该指令用于基于可迭代对象中每一项创建相应模板。它与 AngularJS 1.x 中 ng-repeat 指令功能是等价。...HttpClient 服务步骤 (1) 从 @angular/common/http 模块中导入 HttpClient; (2) 使用构造注入,注入 http 服务; (3) 调用 http 服务...,: @Injectable({ providedIn: 'root' }) export class MemberService {} (2) 在应用地方,导入已创建服务,: import...当我们点击以上任意链接,页面不会被重新加载。...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件,它将动态创建对应组件,并将其作为兄弟元素,插入到

14.1K20

AngularDart4.0 指南- 显示数据 顶

当这些属性改变Angular会更新显示。 更准确地说,重新显示是在与视图相关某种异步事件之后发生,例如按键,计时器完成或对HTTP请求响应。...请注意,您不要调用new来创建AppComponent类实例。 Angular正在为你创建一个实例。 怎样创建? @Component注解中CSS选择器指定了一个名为元素。...Angular使用该变量作为双曲花括号内插上下文。 在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。...在模板中使用任何Angular指令之前,您需要将它们在组件@Component注解指令参数中。...如果有三个或更少项目,Angular会忽略该段落,所以不会显示任何消息。 有关更多信息,请参阅模板语法页面的模板表达式部分。 Angular没有显示和隐藏消息。

5.3K10
  • AngularDart 4.0 高级-结构指令 顶

    对于一个简单段落来说,隐藏和删除之间区别并不重要。 当宿主元素连接到资源密集型组件,这很重要。 即使隐藏,这种组件行为也会继续。 该组件保持连接到其DOM元素。 它一直在倾听事件。...当你编写自己结构指令,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板单个实例中引用。...虽然很少有理由在模板属性或元素形式中应用结构指令,但了解Angular创建并了解它工作原理仍然很重要。 当你编写自己结构指令,你会参考。...然后创建一些HTML来尝试使用它。...在没有合适宿主元素使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

    16.1K20

    Angular--Module使用

    exports(导出) —— 用于其它模块组件模板中使用声明对象子集(the subset of declarations)。...imports(导入) —— 其他模块,本NgModule声明组件需要使用它们导出类。 providers —— 本模块向全局服务中贡献那些服务创建器。 这些服务能被本应用中任何部分使用。...@NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...app CommonModule @angular/common 当你想要使用NgIf 和NgFor FormsModule @angular/forms 当要构建模板驱动表单 ReactiveFormsModule...@angular/forms 当要构建响应式表单 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

    4.9K40

    Angular 显示英雄列表

    给英雄们应用样式 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄,应该给出视觉反馈。...当 CLI 生成 HeroesComponent ,它也同时为 HeroesComponent 创建了空白 heroes.component.css 样式文件,并且让 @Component.styleUrls...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在才显示所选英雄详情。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

    4.4K70

    Angular 显示英雄列表

    给英雄们应用样式 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄,应该给出视觉反馈。...当 CLI 生成 HeroesComponent ,它也同时为 HeroesComponent 创建了空白 heroes.component.css 样式文件,并且让 @Component.styleUrls...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在才显示所选英雄详情。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

    4K30

    Angular2 之 结构型指令几个概念

    注意:这里是出现或者消失,并不是隐藏隐藏元素利弊 当我们隐藏元素,组件行为还在继续。 它仍然附加子啊它所属于DOM元素上,它仍然在监听事件。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...总结 基于上面的利弊分析,无论是我们在使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。...在Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段中。...template-in-out-of-a2.png 显然,Angular把标签及其内容替换成了一个空白 标签。 这只是它默认行为。

    3K20

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

    Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...'none' : 'block'">Hide with style 隐藏一个元素与用NgIf去除一个元素是完全不同。 当你隐藏一个元素,该元素及其所有的后代仍然保留在DOM中。...当NgIf为falseAngular从DOM中删除元素及其后代。 它摧毁了他们组件,潜在地释放了大量资源,从而带来了更加快速用户体验。 展示/隐藏技术适合少数几个后代元素。...警惕隐藏大型组件树; NgIf可能是更安全选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板为列表中每个英雄创建一组新元素和绑定。 在“结构指令”指南中了解微语法。

    30K20

    AngularDart4.0 指南- 表单 顶

    显示和隐藏验证错误消息。 使用ngSubmit处理表单提交。 禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。...在内部,Angular创建NgFormControl实例,并使用Angular附加到标签NgForm指令注册它们。...如果您忽略原始状态,则只有在该值有效才会隐藏该消息。 如果您使用新(空白)英雄或无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息。...当控件是“原始隐藏消息实现了这个目标。 当您向表单添加一个“清除”按钮,您会看到此选项重要性。 英雄Alter Ego是可选,所以你可以不用关那个。 英雄power选择是必需。...提交标志变为真,表格消失。 您将看到表格中显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮,该消失,并且可编辑表单重新出现。

    17.5K30

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

    Hero类  分开使用并将Hero类从app_component.dart 中移动到它自己文件中,创建lib/src文件夹来装Hero源文件:lib/src/hero.dart class Hero...> {{hero.name}} 要在模板中使用Angular指令,需要在组件@Component注解指令参数中列出。...)]="selectedHero.name" placeholder="name"> 使用ngIf指令隐藏对象 当应用程序加载,selectedHero为null。...当表达式为falseAngular删除选定类。 ===运算符测试给定对象是否相同。 在模板语法指南中阅读有关[class]绑定更多信息。  ...您将Hero类移到lib / src下自己文件中。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

    3K30

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中v-model效果是一致,只是写法会有一些区别,vue中是可以直接进行使用...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和css中display:none效果是一致,和visibility...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 在需要使用数据绑定组件进行数据处理 import { Component, OnInit

    2.5K30

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    让更多后端程序员更好了解学习Angualr,拓展自己技术栈。 Angular简介:   Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致单页面应用。...创建第一个Angular项目: https://www.cnblogs.com/Can-daydayup/p/14166192.html Angular 学习资源清单: https://github.com...ngFor循环使用: 属性index、count、first、last、even、odd index属性提供当前对象索引 count提供当前数据集长度,类似于datasource.length...ng-jq 定义应用必须使用库,:jQuery ng-keydown 规定按下按键事件行为 ng-keypress 规定按下按键事件行为 ng-keyup 规定松开按键事件行为 ng-list...指定 元素 srcset 属性 ng-style 指定元素 style 属性 ng-submit 规定 onsubmit 事件发生执行表达式 ng-switch 规定显示或隐藏子元素条件

    5.3K41

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

    如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...你会知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构指令。...*ngFor 指令 我们使用 *ngFor 指令来遍历数组。...甚至可以使用它们来创建一个之前不存在元素。 最好规则是:当我们正在考虑操作 DOM 时候,那么是时候使用结构指令了。...总结 结构指令是 Angular 中很重要一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文为译文,采用意译形式。

    3.8K20

    最受欢迎10大Angular技巧

    / 扩展 Observable 或 Subject 我看到许多开发人员在他们应用中创建了出色服务。...令我有些难过是,一些 Angular 开发人员不喜欢创建自己管道,可其实你几乎可以在任何数据转换场景中创建管道。 这是适用于许多情况通用管道示例: ?...s=20 RxJS 是一个未开发世界 使用 RxJS ,我尝试检查 RxJS 运算符所有参数和重载,原因是有许多隐藏选项可以使你更快地编写更强大流。...s=20 你甚至可以制作自己 ngFor 替代品 最后一个:Angular 对于 for...of... 之类指令有特殊语法。这样,你可以创建自己 ngFor。...例如,它可以是用于迭代映射 ngFor。或一个简单从一个数字迭代到另一个数字 for: ? ?

    2.1K40

    Angular快速学习笔记(2) -- 架构

    declarations(可声明对象) —— 那些属于本 NgModule 组件、指令、管道 exports(导出) —— 那些能在其它模块组件模板中使用可声明对象子集。...imports(导入) —— 那些导出了本模块中组件模板所需其它模块。 providers —— 本模块向全局服务中贡献那些服务创建器。 这些服务能被本应用中任何部分使用。...视图通常会分层次进行组织,让你能以 UI 分区或页面为单位进行修改、显示或隐藏。 与组件直接关联模板会定义该组件宿主视图。...Hero List Pick a hero from the list <li *ngFor="let hero of heroes" (click...1.4 路由(Routing) Angular Router 模块提供了一个服务,它可以让你定义在应用各个不同状态和视图层次结构之间导航使用路径。

    5.3K20
    领券