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

当ng.for小于表头(th)时,如何在表数据(td)中显示空消息?

当ng.for小于表头(th)时,可以使用ngIf指令来判断表数据(td)是否为空,如果为空则显示空消息。

在HTML模板中,可以使用ngIf指令来判断ng.for循环的数据是否为空。具体步骤如下:

  1. 在表数据(td)所在的HTML元素上添加ngIf指令,并设置条件判断表数据是否为空。例如:
代码语言:txt
复制
<td *ngIf="data.length === 0">暂无数据</td>
  1. 在组件中定义一个名为data的数组变量,并在ngOnInit生命周期钩子函数中初始化该数组。例如:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  data: any[] = [];

  ngOnInit() {
    // 初始化数据
    this.data = []; // 可以从后端获取数据赋值给data数组
  }
}

这样,当ng.for循环的数据为空时,表数据(td)所在的HTML元素就会被ngIf指令判断为真,并显示"暂无数据"的空消息。

注意:以上代码示例是基于Angular框架的实现,如果使用其他前端框架或纯JavaScript开发,具体实现方式可能会有所不同。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云数据库MySQL版、腾讯云CDN等。具体产品介绍和链接地址请参考腾讯云官方文档。

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

相关·内容

超 Nice 的表格响应式布局小技巧

今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽,表现为一个整体 Table 的样式 而屏幕视口宽度较小时,...原 Table 的每一行数据单独拆分为一个 Table 进行展示 很有意思的一个响应式布局,让信息在小屏幕下得到了一种不错的展示。...另外,我们观察下拆分后的每一组数据: 都会存在一组原本整体一个 Table 表头信息,主要的难点就是在这里,我们如何在拆分成一个一个的子 Table 展示,同时展示这些表头信息?...: block,这样,它们就会竖向排列,使每一个 形成新的一个子 table 好,这样,再屏幕宽度小于 600px ,我们就得到了这样一个 Table: 借助伪元素及其特性,实现表头信息展示...下面一步,也就是最为关键的一步,我们如何在子 table 的每一行,也就是 内,再展示原本的表头信息呢?

1.4K10
  • 03.HTML头部CSS图像表格列表

    元素: 定义了浏览器工具栏的标题 网页添加到收藏夹显示在收藏夹的标题 显示在搜索引擎结果页面的标题 一个简单的 HTML 文档: 实例 HTML 元素 ...内部样式 单个文件需要特别样式,就可以使用内部样式。你可以在 部分通过 标签定义内部样式: 外部样式 样式需要被应用到很多页面的时候,外部样式将是理想的选择。...有时这很有用,但是大多数时候,我们希望显示边框。 使用边框属性来显示一个带有边框的表格: 实例 HTML 表格表头 表格的表头使用 标签进行定义。...漂亮的表格 HTML源代码: CSS源代码: 运行结果: HTML 表格标签 标签 描述 定义表格 定义表格的表头 定义表格的行 定义表格单元 <caption...每一个单元格就是用来存放数据的,这个数据分为两种:一,数据的名称;二,数据本身。 用 表示数据的名称(标题) , 表示真正的数据内容。

    19.4K101

    5.HTML表格列表标签元素介绍

    [TOC] 0x00 前言简述 本章将主要给各位看友介绍表格 table 与列表 list 中常用的标签元素属性,本节标签一览如下所示: 表格 定义表格,一般表格数据太多,就会下载一点显示一点.../th> 数据单元 数据单元 数据单元 WeiyiGeek.table表格综合示例1结果图 ---- colgroup 标签 描述: 在 HTML 的 表格列组(Column Group )标签用来定义的一组列表...[] : col 元素是仅包含属性的元素, 如需创建列,您就必须在 tr 元素内部规定 td 元素。...通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动,包含多个页面的长的表格被打印,表格的表头和页脚可被打印在包含表格数据的每张页面上。

    1.5K30

    HTML学习笔记一

    表头标签: 表头标签的字体会加粗 标签和标签的应用方法一样,被标签所包涵...单元格问题: 如果标签的内容为,则会出现一些异常,所以想表示单元格,可以在标签写入“  ;” 表格标签: 标签 描述 定义表格 定义表格标题 定义表头 定义行 定义单元格 定义表格页眉 定义表格主题 定义表格页脚...head元素数据可用于浏览器(如何显示内容或重新加载页面),搜索(关键字)或其它web服务。...HTML实体 在HTML,预留了部分字符,在HTML不能使用大/小于号;如果希望正确的显示预留字符,就必须在HTML源代码中使用字符实体 HTML 实体符号参考手册 显示结果 描述 实体名称 实体编号

    2.5K11

    前端之HTML

    post请求:用户向服务器提交数据登录某个网站需要提交用户名和密码。...基于请求做出响应,只有请求才会响应 无状态(不保存用户的状态,不管用户数否刚刚访问过某个服务端,服务端都不会记录客户端的状态) 无连接(其实就是请求建立连接,服务器处理完客户端的请求后将结果发送给客户端...相对于无连接还有长连接的概念,普通的聊天软件 3.2.数据格式 3.2.1请求的数据格式 请求首行(里面是请求的方式,协议的版本) 请求头(请求头里是一大堆的键值对) /n或者/r(这一行是的,但是必须有这一行...在这里设置的属性 表头 ...姓名 性别 年龄 列表里的一行数据,每行都是一个

    1.6K30

    JavaScript SheetJS将 Html 转换为 Excel 文件

    在本教程,我们可以在客户端从我们的 HTML 数据创建一个 excel 文件。即使用javascript将HTML 导出到Excel (.xlsx)。...有许多可用的库可以从 HTML 创建 CSV 文件或 xlsx 文件,但所有库都给出了提示消息。那就是当我们打开该excel文件,它会提示一条消息,文件名的文件格式和扩展名不匹配。...使用 SheetJs 库的第二个优点是它可以轻松地将大型 HTML 表格导出到 excel,下面提供了一个示例。 您还可以查看我关于如何在客户端 将 HTML 转换为图像的文章。...接下来,我们必须在按钮单击添加和调用 javascript 函数,即 ExportToExcel。 JavaScript 代码:使用 Sheetjs 库将表格数据导出到 excel 文件。...结论:这里使用SheetJS我们可以将Html表格导出到一个excel文件。此外,其他库在打开 excel 文件显示弹出消息,这里使用 Sheetjs 它会在没有任何弹出消息的情况下打开。

    5.2K20

    如何用原生 DOM API 生成表格

    题目要求你用 JavaScript 构建一个 HTML 。你的任务是依据 “mountains” 数组数据生成表格,将对象的key对应到列并且每行一个对象。...HTML 表格是包含表格数据的元素,以行和列的形式显示。...填充表头的工作只做了一半,可以看到表头中填充了一堆 th。每个表头必须映射到对象描述数据组成的 key 上。 信息已经存在于数组 mountains 的第一个对象内部。...接下来该填表了…… 生成行和单元格 为了填充表格可以遵循同样的方法,但这次我们需要迭代 mountains 数组的每个对象。进入 for…of 循环,将为每个项目创建一个新行。...当你在上调用 insertRow() ,这些方法会为自动你创建一个tbody(如果没有的话)。 做得好!不过我们的代码可能没进行很好的组织(有太多的全局绑定),这些将会在下一篇文章中提到。

    2K20

    动手练一练,手写一个价格对比、固定表头滚动的表格

    截屏2020-03-25下午5.02.21.png 大家好,今天我们将一起实践下如何手写固定表头,那么什么是固定表头呢?就类似 Excel 表格有个锁定表头的功能,方便用户查阅数据进行数据项的对比。...虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天的实例,我们将用纯原生的方式进行实现,滚动条滚动至表格位置,固定表头位置,表格内容查看完后,取消固定表头的功能。...今天我们将通过一个界面十分漂亮功能价格对比的表格,展示固定表头的功能,实例操作展示视频所示,滚动条滚动至表格位置,添加表头固定样式,滚动至表格底部,移除固定表头样式。...scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。...如果屏幕宽度小于780px,取消固定表头的逻辑,移除stickyClass,sticky2-table 相关的样式 基于以上逻辑我们实现相关的代码逻辑: window.addEventListener(

    3.2K31

    想知道HTML语法结构?看这一篇就够了(超全解析html语法)

    表头标记 表头标记是开头,以结尾也可以通过align,background,colspan,valian等属性来设置表头。...【1)get属性值表示将输入的数据追加在action指定的地址后边,并传送到服务器。2)当属性值为post,会将输入的数据按照HTTP的post传输方式传送到服务器。】...其属性值可以为值,也可以指定为readonly size 用于指定输入字段的宽度,type属性为text和password,以文字个数为单位,type属性为其他值,以像素为单位 src 用于指定图片的来源...例如,标记的name属性值为Map,该URI为#Map alt 用于指定当图片无法显示显示的文字,只有当type属性为image才有效 name 用于指定输入字段的名称 value 用于指定输入字段默认的数据值...type属性为button、reset和submit,指定的是按钮上的显示文字;type属性为checkbox和radio,指定的是数据项选定时的值 type属性是标记中非常重要的内容,决定输入数据的类型

    5.6K30

    HTML 快速入门

    例如,内容可以在一组段落、项目符号列表或使用图像和数据中进行结构化; 通俗的理解为:HTML就是构造网页的骨架; 定义 HTML 是一种定义内容结构的标记语言。...' = HTML标签 在HTML,标签用于创建元素; HTML 元素的名称是尖括号(段落)中使用的名称。...; :Web 用户访问页面向他们显示的所有内容,编写给用户查看的内容; 如何注释 方式一: 1.单行注释 <!...如果由于某种原因无法加载图像,普通浏览器也会在页面上显示alt 属性的备用文本:例如,网络错误、内容被屏蔽或链接过期; title:属性写文本用于鼠标悬浮在图片上之后提示的文本信息; height...>:表示一行 :在表头的字段名称 :普通的单元格数据 <!

    2.8K10

    html语义化2

    并且图片无法显示,页面 会显示alt的文字。 title属性也用于图片描述,不过这个描述文字是给用户看的。并且当鼠标指针移到图片 上,会显示title的内容。...问大家一个问题:如图所示的这种表格数据的展示,应该怎么实现呢?不少得了 “table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上,对于这种表格数据形式, 最好的选择还是table。...thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头身和脚。有了这几个标签,表格语义更加良好,结构更加清晰。...表头(语义划分) tbody 身(语义划分) tfoot 尾(语义划分) t 行 th...--表头--> 表头单元格l 表头单元格2

    61010

    接口测试平台代码实现22:项目列表前后端开发

    eid为project_list.html,就获取DB_project我们的项目数据的所有数据,然后写入res这个字典,作为projects键的值存入。...下面有 thead 和 tbody俩部分,thead是表头,tbody是具体内容哦。 无论是表头还是内容,都需要分行分列(表头也有俩三行的)。...所以每一行的标签是tr,表头中的每一列是th ,具体内容的每一列的标签是td。一般都是一个tr内包含多个thtd。...不过现在我们要把刚刚的 项目列表数据放进来,我们要循环显示的其实是 的具体内容tbody 的每一个tr行 都要放进循环体: 这里千万不要写错了,瞪大眼睛抄。...到这里我们这个已经比较完善了,下一节,我们继续优化这个列表页的显示效果,新增项目功能,还有俩个按钮的实际功能实现。

    1.2K10
    领券