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

*ngIf在mat-table ng-container内不工作

ngIf是Angular框架中的一个指令,用于根据条件来决定是否渲染某个元素或组件。在mat-table中使用ngIf时,需要注意一些细节。

首先,mat-table是Angular Material库中的一个组件,用于展示表格数据。mat-table的结构包括一个或多个mat-header-row、mat-row和mat-cell,这些元素需要包裹在mat-table的<ng-container>标签内。

如果想在mat-table的<ng-container>内使用ngIf来动态控制元素的显示与隐藏,需要确保ngIf指令应用于正确的元素。一般情况下,*ngIf应该应用于mat-cell元素而非<ng-container>元素本身。

示例代码如下:

代码语言:txt
复制
<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element" *ngIf="element.show"> {{element.name}} </td>
</ng-container>

在上述代码中,*ngIf被应用于mat-cell元素,而不是<ng-container>元素。这样做可以确保根据条件动态显示或隐藏特定的单元格内容。

另外,要确保在使用ngIf时,已经正确设置了相关的数据绑定。在这个例子中,element是一个通过matCellDef指令传递给mat-cell的输入对象,需要在组件中定义并为其设置相应的属性。示例代码如下:

代码语言:txt
复制
export interface Element {
  name: string;
  show: boolean;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  elements: Element[] = [
    {name: 'Element 1', show: true},
    {name: 'Element 2', show: false},
    {name: 'Element 3', show: true},
    // ...
  ];
}

在组件中,我们定义了一个名为elements的数组,其中每个元素都包含一个name属性和一个show属性。show属性决定了对应的单元格是否应该显示。

需要注意的是,*ngIf在mat-table中的使用方式与其他常规HTML元素的使用方式略有不同,因为mat-table采用了特定的结构和指令。

至于腾讯云相关产品和产品介绍链接地址,根据问题描述中的要求,我不能提及具体的品牌商,但可以推荐腾讯云的云计算服务产品。可以通过访问腾讯云的官方网站,了解他们提供的云计算服务以及与之相关的解决方案和产品。

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

相关·内容

Angular Material 的设计之美

各种各样没有 bug 的用例中按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范的范围进行定制。 将性能开销降至最低。...顺便插一句,如果大家纠结用 Sass 还是 Less,可以看一下这篇文章 CSS 预处理器中的循环,个人建议用 Less,请原谅我无意引战?。...如果只作为 DEMO 展示是没问题的,但是生产环境推荐这样做。 ng-matero 使用 ng add 初始化的时候增加了预构建主题选项,生成的主题只有一份,如果有特殊需求可以自行定制。...然而仔细研究一下就会发现,mat-table DOM 层面的抽象,本质是一样的。...mat-table 对表格列宽的首选操控方式是 CSS,起初我对这种方式也存在疑虑,但是我亲自封装了 ng-zorro-antd 的表格组件之后,我发现一切都很自然。

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中的v-model的效果是一致的,只是写法会有一些区别,vue中是可以直接进行使用的,但是angular...app.modules.ts中引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据的双向绑定 import...false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹...运行效果 如果这个tag标签不太理解的,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个,html的任何场景下都可以使用!

    2.5K30

    VBA: 工作簿复制用户窗体

    文章背景:Excel中,创建完一个用户窗体(Userform)后,有时想要在此基础上,创建针对另一场景的用户窗体。那么,如何在工作簿复制用户窗体呢?下面介绍两种办法。...方法二: 将用户窗体移到新工作簿,然后再将该用户窗体移回原工作簿。为避免移入错误,移入前,需要修改新工作簿用户窗体的名称。具体步骤如下: (1)新建一个启用宏的工作簿(*.xlsm)。...(2)选中需要复制的用户窗体,将该窗体拖动到新工作簿。 (3)修改新工作簿用户窗体的名称,避免移入窗体时,出现同名窗体已存在的错误。...(4)将新工作簿的用户窗体拖动到原工作簿。 视频演示:http://mpvideo.qpic.cn/0bf2suaaaaaatqal5kdw5fqvbfodackqaaaa.f10002.mp4?

    1.4K20

    为什么建议把数据库部署docker容器

    前言 近2年Docker非常的火热,各位开发者恨不得把所有的应用、软件都部署Docker容器中,但是您确定也要把数据库也部署的容器中吗?...即使你要把 Docker 数据放在主机来存储 ,它依然不能保证丢数据。Docker volumes 的设计围绕 Union FS 镜像层提供持久存储,但它仍然缺乏保证。...(3)合理布局应用   对于IO要求比较高的应用或者服务,将数据库部署物理机或者KVM中比较合适。目前TX云的TDSQL和阿里的Oceanbase都是直接部署物理机器,而非Docker 。...云简化了虚拟机操作和替换的复杂性,因此不需要在夜间或周末没有人工作时间来测试新的硬件环境。当我们可以迅速启动一个实例的时候,为什么我们需要担心这个实例运行的环境? ?...因为数据匹配,新实例不会与现有的实例兼容,如果要限制实例使用单机服务,应该让 DB 使用非容器化环境,我们仅仅需要为计算服务层保留弹性扩展的能力。

    5.6K30

    为什么建议把数据库部署Docker容器

    针对数据库是否适合容器化这个问题,不同的人可能会给出不同的答案,回答此问题之前我们先看下容器化部署数据库和常规数据库部署上的一些比较。...即使你要把 Docker 数据放在主机来存储 ,它依然不能保证丢数据。Docker volumes 的设计围绕 Union FS 镜像层提供持久存储,但它仍然缺乏保证。...(3)合理布局应用 对于IO要求比较高的应用或者服务,将数据库部署物理机或者KVM中比较合适。目前TX云的TDSQL和阿里的Oceanbase都是直接部署物理机器,而非Docker 。...云简化了虚拟机操作和替换的复杂性,因此不需要在夜间或周末没有人工作时间来测试新的硬件环境。当我们可以迅速启动一个实例的时候,为什么我们需要担心这个实例运行的环境?...因为数据匹配,新实例不会与现有的实例兼容,如果要限制实例使用单机服务,应该让 DB 使用非容器化环境,我们仅仅需要为计算服务层保留弹性扩展的能力。

    96220

    为什么建议把数据库部署Docker容器

    这个问题不是子虚乌有,因为在网上能够找到很多各种操作手册和视频教程,小编整理了一些数据库不适合容器化的原因供大家参考,同时也希望大家使用时能够谨慎一点。...即使你要把 Docker 数据放在主机来存储 ,它依然不能保证丢数据。Docker volumes 的设计围绕 Union FS 镜像层提供持久存储,但它仍然缺乏保证。...(3)合理布局应用   对于IO要求比较高的应用或者服务,将数据库部署物理机或者KVM中比较合适。目前TX云的TDSQL和阿里的Oceanbase都是直接部署物理机器,而非Docker 。...云简化了虚拟机操作和替换的复杂性,因此不需要在夜间或周末没有人工作时间来测试新的硬件环境。当我们可以迅速启动一个实例的时候,为什么我们需要担心这个实例运行的环境?...因为数据匹配,新实例不会与现有的实例兼容,如果要限制实例使用单机服务,应该让 DB 使用非容器化环境,我们仅仅需要为计算服务层保留弹性扩展的能力。

    1.3K10

    为什么建议把数据库部署docker容器

    即使你要把 Docker 数据放在主机来存储 ,它依然不能保证丢数据。Docker volumes 的设计围绕 Union FS 镜像层提供持久存储,但它仍然缺乏保证。...(3)合理布局应用   对于IO要求比较高的应用或者服务,将数据库部署物理机或者KVM中比较合适。目前TX云的TDSQL和阿里的Oceanbase都是直接部署物理机器,而非Docker 。...知识点: Docker 中水平伸缩只能用于无状态计算服务,而不是数据库。...云简化了虚拟机操作和替换的复杂性,因此不需要在夜间或周末没有人工作时间来测试新的硬件环境。当我们可以迅速启动一个实例的时候,为什么我们需要担心这个实例运行的环境?...因为数据匹配,新实例不会与现有的实例兼容,如果要限制实例使用单机服务,应该让 DB 使用非容器化环境,我们仅仅需要为计算服务层保留弹性扩展的能力。

    3K00

    VBA实用小程序61: 文件夹所有文件中运行宏工作簿所有工作表中运行宏

    学习Excel技术,关注微信公众号: excelperfect 文件夹中所有文件上运行宏,或者Excel工作簿中所有工作表上运行宏,这可能是一种非常好的Excel自动化方案。...文件夹所有文件中运行宏 代码如下: '本程序来自于analystcave.com Sub RunOnAllFilesInFolder() Dim folderName As String...3.使用要在每个打开的工作簿上运行的代码替换“在这里放置你的代码”部分。 4.每个打开的工作簿关闭时不会保存所作的修改。...子文件夹所有文件中运行宏 当想在文件夹中所有Excel文件上运行宏时,其中的一种情况是遍历所有子文件夹来运行宏。..." End Sub 工作簿所有工作表中运行宏 代码如下: '本程序来自于analystcave.com Sub RunOnAllWorksheets() Dim folderName As String

    4.7K11

    公司制度规范的情况下,如何做好测试工作

    首先我要说,公司目前制度规范,对我们来说是个机遇,绝对是个机遇! 遇到这个好机会你还在等什么?如果说这个公司已经足够好了,那他还请你过来做什么?你的能力还足以让公司有更高的提升么?...我们的选择要么改变自己要么改变别人,千万不要一方面抱怨公司,另一方面还赖公司走,那是最令人鄙视的人生了! 二、对于已经做管理层,有机会改变公司现状的,那恭喜你。...如果要,那恭喜,你一定要得到尚方宝剑,特别是对于比较国企话的公司,否则出师无名,人家拽你。如果上面没这个要抓测试提高质量的目的,你怎么办?跟上面忽悠呗!...问他们对今后的测试有啥意见,他们想怎么搞,然后,好,跟他们交换思路,把你的大致想法讲给他们听,看看他们什么意见,肯定会有很多好意见的,因为人家也想趁着这个机会提高质量少给自己以后的工作找麻烦。...这个过程可能需要经过2轮,因为要将自己修改后的东西和别人沟通么。

    1.2K30
    领券