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

为什么*ngIf不能在Angular中使用ng-container

ngIf不能直接在Angular中使用ng-container的原因是因为ng-container是一个逻辑容器,它本身不会被渲染到DOM中。而ngIf是一个结构指令,用于根据条件来添加或移除DOM元素。由于ng-container不会被渲染到DOM中,所以*ngIf无法直接应用在ng-container上。

然而,我们可以通过在ng-container上使用ng-template来实现类似于*ngIf的功能。ng-template是一个模板容器,可以包含任意的HTML代码,并且可以通过条件来动态地插入或移除DOM元素。

下面是一个示例代码,演示了如何使用ng-template来实现类似于*ngIf的效果:

代码语言:txt
复制
<ng-container *ngTemplateOutlet="myTemplate; context: { $implicit: condition }"></ng-container>

<ng-template #myTemplate let-condition>
  <div *ngIf="condition">
    <!-- 在条件满足时渲染的内容 -->
  </div>
</ng-template>

在上面的代码中,我们使用了ng-container来包裹ng-template,并通过ngTemplateOutlet指令将ng-template应用到ng-container上。通过设置context参数,我们可以将条件值传递给ng-template,并在ng-template内部使用ngIf来根据条件来渲染内容。

需要注意的是,ng-container和ng-template都是Angular提供的特殊元素,它们不会被渲染为实际的DOM元素,只是用于逻辑控制和模板定义。

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

相关·内容

ng-content 隐藏的内容

如果你尝试在 Angular 编写可重复使用的组件,则可能会接触到内容投射的概念。然后你发现了 ,并找到了一些关于它的文章,进而实现了所需的功能。...由于许多问题与Angular 的组件生命周期相关,因此我们的主要组件将显示一个计数器,用于展示它已被实例化的次数: import { Component } from '@angular/core';...有时你只需要将其包装在额外的容器即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你的内部组件不是包装器的直接子节点。...在我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令的外层容器添加 ngIf 指令: import { Component } from '@angular/core';...为什么按照我们的预期运行? The explanation 不会 “产生” 内容,它只是投影现有的内容。

2.7K30

Angular Material 的设计之美

接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点,并且简单介绍 Angular Material 的一些使用技巧。...题外话:为什么 ng-matero 会选择 Angular Material 抛开官方提到的几点不谈。首先我是那种比较激进的开发者,对于先进的设计理念,我都有跃跃欲试的执念。...顺便插一句,如果大家纠结用 Sass 还是 Less,可以看一下这篇文章 CSS 预处理器的循环,个人建议用 Less,请原谅我无意引战?。...我最开始认为将所有样式全部写到 mixin 并不是很优雅的做法,但是在编写 ng-matero 暗黑主题的时候,我发现这样做是不行的。以下是 Angular Material 主题定制的方法。...如果只作为 DEMO 展示是没问题的,但是生产环境推荐这样做。 ng-matero 在使用 ng add 初始化的时候增加了预构建主题选项,生成的主题只有一份,如果有特殊需求可以自行定制。

5K30

AngularDart 4.0 高级-结构指令 顶

ngIf指令不会隐藏CSS元素。 它从DOM物理添加和删除它们。 使用浏览器开发人员工具确认事实,以检查DOM。 ? 顶部段落在DOM。...这就是为什么你写[ngSwitch],从不写成*ngSwitch。 NgSwitchCase和NgSwitchDefault是结构指令。使用星号(*)前缀表示法将它们附加到元素。...满足Angular模板的类似需求。 编写一个结构指令 在本节,您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。...指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司的简短内容。 在这个例子,前缀是my。...-- No ng-container yet: I turned the corner <ng-container *ngIf="hero !

16K20

Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

投影子元素 使用ng-container来包裹子元素,减少不必要的dom层,类似vue的template 容器组件这样写 编号4 <ng-content select="question...在这种情况下,<em>不</em>建议<em>使用</em> ng-content 元素,因为只要组件的<em>使用</em>者提供了内容,即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 <em>ngIf</em> 语句的内部,该内容也总会被初始化...<em>使用</em> ng-template 元素,你可以让组件根据你想要的任何条件显式渲染内容,并可以进行多次渲染。在显式渲染 ng-template 元素之前,<em>Angular</em> 不会初始化该元素的内容。...<em>使用</em><em>ng-container</em>定义我们的投影区块 <em>使用</em>ngTemplateOutlet指令来渲染ng-template元素。 通过内置的动态指令*<em>ngIf</em>来控制是否渲染投影。...]="content.templateRef"> 在业务组件我们使用ng-template来包裹我们的实际元素。

52930

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular的基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue的v-model的效果是一致的,只是写法会有一些区别,vue是可以直接进行使用的...,但是在angular我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变!...NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css的display:none效果是一致的,和visibility:hidden是要区别开的,当if判断为false的时候...false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹

2.5K30

MyBatis 为什么建议使用 where 1=1?

正确的改进方式 其实不用,在 MyBatis 早已经想到了这个问题,我们可以将 SQL 的 where 关键字换成 MyBatis 的 标签,并且给每个 标签内都加上 and 拼接符,这样问题就解决了...传任何参数的请求 此时我们可以传递任何参数(查询所有数据),如下图所示: 生成的 SQL 语句如下: 传递 1 个参数的请求 也可以传递 1 个参数,根据 name 进行查询,如下图所示...SQL 如下图所示: 传递 2 个参数的请求 也可以根据 name 加 password 的方式进行联合查询,如下图所示: 生成的 SQL 如下图所示: 用法解析 我们惊喜的发现,在使用了...标签之后,无论是任何查询场景,传一个或者传多个参数,或者直接传递任何参数,都可以轻松搞定。 ​...and 关键字删除掉,从而不会导致 SQL 语法错误,这一点官方文档也有说明,如下图所示: 总结总结 在 MyBatis ,建议尽量避免使用无意义的 SQL 拼接 where 1=1,我们可以使用

74210

MyBatis 为什么建议使用 where 1=1?

2 正确的改进方式 其实不用,在 MyBatis 早已经想到了这个问题,我们可以将 SQL 的 where 关键字换成 MyBatis 的标签,并且给每个标签内都加上 and 拼接符,这样问题就解决了...传任何参数的请求 此时我们可以传递任何参数(查询所有数据),如下图所示: 生成的 SQL 语句如下: 传递 1 个参数的请求 也可以传递 1 个参数,根据 name 进行查询,如下图所示: 生成的...生成的 SQL 如下图所示: 传递 2 个参数的请求 也可以根据 name 加 password 的方式进行联合查询,如下图所示: 生成的 SQL 如下图所示: 用法解析 我们惊喜的发现,在使用了标签之后...,无论是任何查询场景,传一个或者传多个参数,或者直接传递任何参数,都可以轻松搞定。...and 关键字删除掉,从而不会导致 SQL 语法错误,这一点官方文档也有说明,如下图所示: 3 总结 在 MyBatis ,建议尽量避免使用无意义的 SQL 拼接  where 1=1,我们可以使用标签来替代

58110

为什么实际业务建议直接使用POI操作Excel?

一: 使用场景 在日常的系统开发,系统支持批量数据的操作是一个很常见的功能,其中,最常用的方式是使用excel表格对数据进行批量添加、删除,如:批量新建订单、批量添加商品等。...   4、ExcelWriter实例.finish() --》完成写入操作,并关闭流(一定要注意关闭流,因为easyExcel是使用磁盘的方式进行数据解析,所以解析过程中会创建临时文件,如果不关闭,最后可能会导致磁盘崩溃...(2) : index -- 指定该字段和excel文件的哪一列对应,默认是0,推荐和value属性同时指定,如果需要指定,那么value的值最好指定为导出数据对应表头的标题名,index的值则指定为读取...3、@ExcelIgnore: 被标注的属性参加Excel的读写,相当于直接省略。...如果这里抛出异常则 继续读取下一行。

1.4K10

什么是线程组,为什么在 Java 推荐使用

在线程组,如果发生未捕获异常,可以通过 Thread.UncaughtExceptionHandler 进行处理。 在 Java ,虽然线程组是一种功能强大的机制,但实际上并不推荐使用。...在实践,像 Executor 这样的 API 已经为线程管理提供了更加强大、可控的解决方案,相比之下,线程组已经逐渐退出 Java 中被广泛使用的范畴。...考虑到大多数应用场景都需要进行动态调度,而且现代的 JDK 版本已经增加了类似 CompletableFuture、CompletionService 等更高级且易维护的机制,因此使用线程组会带来更多的限制而不是优势...3、容易引起歧义 在 Java ,虽然 ThreadGroup 的设计旨在通过将一组线程分到同一个容器来轻松管理和控制它们,但如果使用错误,可能会导致线程状态。...因此,在 Java ,线程组已基本过时,推荐使用 Executor 框架等新的更实用的工具来进行线程管理。

27120

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

你会知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构的指令。...在 Angular ,有三种标准的结构化指令。...*ngIf 指令 我们根据条件来使用 *ngIf 来确定展示或者移除一个元素。...Angular 我们什么时候需要用结构指令呢? 如果你想在 DOM 添加或者移除一个元素的时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。...总结 结构指令是 Angular 很重要的一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文为译文,采用意译的形式。

3.8K20

Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

前言 上传功能在任何一个网站的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件 ---- 效果图 ?...---- 所具有的功能 支持的图片格式(传参则使用默认参数) 支持的图片大小 图片上传之前会被压缩(前端) -- 异步加载进来 上传过程会显示loading(loading组件)--就一些css3样式.../core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms';...constructor() { } // 使用promise异步获取回调后动态插入该脚本 load(): Promise { const LRZ_URL = 'http...// 删除图片预览 delete(e) { // console.log(e); this.preview = null; } } ---- 总结 我们的项目一些库都使用

96510

Angular 显示英雄列表

英雄们显示在列表,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...把显示英雄详情的 HTML 包裹在一个  。 并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。...不要忘了 ngIf 前面的星号(*),它是该语法的关键部分。...为什么这样是正常的 当 selectedHero 为 undefined 时,ngIf 从 DOM 移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

4.4K70
领券