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

有没有一种方法可以在考虑到由于*ngIf而不显示的元素的同时使用末尾类型?

在考虑到由于ngIf而不显示的元素的同时使用末尾类型的方法是使用条件渲染指令ngIf和*ngTemplateOutlet的组合。

ngIf是Angular中的一个结构指令,用于根据条件来添加或移除DOM元素。当条件为false时,ngIf会从DOM中移除元素,因此无法直接访问被移除的元素的末尾类型。

为了在考虑到ngIf的情况下使用末尾类型,可以使用ngTemplateOutlet指令。*ngTemplateOutlet指令可以将一个模板引用插入到当前位置。通过将模板引用定义为一个带有末尾类型的元素,即可在不显示的情况下使用末尾类型。

以下是一个示例:

代码语言:txt
复制
<ng-container *ngIf="condition; else templateRef">
  <!-- 显示的内容 -->
</ng-container>

<ng-template #templateRef>
  <!-- 不显示的内容,但可以使用末尾类型 -->
</ng-template>

在上面的示例中,当条件为true时,ngIf会显示"显示的内容",当条件为false时,ngIf会使用else语句中的模板引用#templateRef,即"不显示的内容"。尽管"不显示的内容"在页面上不可见,但仍然可以使用其末尾类型。

需要注意的是,使用ngIf和ngTemplateOutlet的组合可能会导致模板的重复渲染,因此在性能要求较高的情况下,应谨慎使用。

相关搜索:在VB中,有没有一种方法可以创建当前类型的实例而不命名它?有没有一种方法可以复制列表元素而不使用python中的循环?有没有一种快速的方法可以只使用一种类型的元素来创建向量的向量?在Android中,有没有一种方法可以在元素居中的同时使其停留在屏幕上?有没有一种方法可以在使用IntelliJ + Bazel + Scala的同时浏览库源代码?使用magellan-nightwatch,有没有一种方法可以断言某些元素是隐藏/显示的?有没有一种方法可以在不验证选择的情况下使用ChoicePrompt?在JS中有没有一种方法可以计算字符串值的宽度而不呈现为DOM元素- JS有没有一种方法可以让文本显示在绝对元素的下方,而不需要在元素上添加页边距?有没有一种方法可以找到使用绑定到事件的属性的数组元素,同时使用ngfor作为默认值?有没有一种方法可以在不阻止桌面输入的情况下阻止移动键盘显示?有没有一种方法可以修改外部组件库的样式,而不指定默认的类名或使用!重要?有没有一种方法可以在不使用循环的情况下获取列表的每个元素?有没有一种方法可以在不指定网站的情况下使用URL进行搜索?在Teradata中有没有一种方法可以将行转换为列而不更改新值的查询有没有一种方法可以在不构建的情况下使用skaffold配置加载私有镜像?有没有一种方法可以得到ping的结果,在文本框中显示,而不是旋转色轮?有没有一种方法可以在不创建POJO的情况下使用jackson API解析标记元素中包含属性的嵌套XML?有没有一种方法可以在不使用HTML/CSS元素的情况下跟踪Selenium的上传进度?有没有一种方法可以在模板函数中使用可变数量的类型名,比如参数包?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular DOM 抽象概述

模板元素是一种机制,允许包含加载页面时不渲染,但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。...: 创建内嵌视图(embedded view) 遍历内嵌视图中的 rootNodes,动态的插入 node 虽然我们已经成功的显示出 template 模板元素中的内容,但发现整个流程还是太复杂了,那有没有简单地方式呢...ViewRef ViewRef 是一种抽象类型,用于表示 Angular 视图。在 Angular 中,视图是构建应用程序 UI 界面基础构建块。...,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: ngIf="lessons" *ngFor="let lesson of lessons...那么有没有办法不用创建一个额外的元素呢?答案是有的,就是使用 元素。

3.5K30

AngularDart 4.0 高级-结构指令 顶

您将在本指南中学习到星号(*)是一种便利的符号,字符串是一种微型语法,而不是通常的模板表达式。 Angular将这个符号解析成一个围绕宿主元素及其后代的标记。...组件以本地HTML元素的方式管理HTML区域。 从技术上讲,这是一个模板指令。 属性指令改变元素,组件或其他指令的外观或行为。 例如,内置的NgStyle指令可以同时更改多个元素样式。...为什么要移除而不是隐藏? 指令可以通过将其显示样式设置为无隐藏不需要的段落。...当你编写自己的结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor的源代码是了解更多信息的好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板的单个实例中引用。...打算在其他地方使用的p span样式无意中应用于此处。 另一个问题:一些HTML元素要求所有直系孩子属于特定类型。 例如,元素需要子元素。

16.1K20
  • ng-content 中隐藏的内容

    你可以认为它等价于 node.appendChild(el)或 jQuery 中的 $(node).append(el) 方法:使用这些方法,节点不被克隆,它被简单地移动到它的新位置。...因此,投影内容的生命周期将被绑定到它被声明的地方,而不是显示在地方。 这种行为有两个原因:期望一致性和性能。什么 “期望的一致性” 意味着作为开发人员,可以基于应用程序的代码,猜测其行为。...其中唯一方法就是查看第三方库的代码,了解它们的内部处理逻辑。将组件的生命周期被绑定到我们的应用程序组件而不是包装器的意义是,开发者可以掌控计数器只被实例化一次,而不用了解第三方库的内部代码。...性能的原因更为重要。因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序的工作量。...The solution 为了让包装器能够控制其子元素的实例化,我们可以通过两种方式完成:在我们的内容周围使用 元素,或者使用带有 “*” 语法的结构指令。

    2.7K30

    AngularDart4.0 指南- 显示数据 顶

    您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...它应该显示标题和英雄的名字: ? 模板内嵌或模板文件? 您可以将组件的模板存储在两个地方之一中。...使用Hero类 导入Hero类后,AppComponent.heroes属性可以返回一个Hero对象的类型列表:lib/app_component.dart (heroes) List heroes...用NgIf进行条件显示 有时候,只有在特定情况下,应用程序才需要显示视图或视图的一部分。 如果有三个以上的英雄,让我们更改示例以显示一条消息。...它正在添加和删除DOM中的段落元素。 这可以提高性能,特别是在大型项目中,当有条件地包含或排除大量的HTML与许多数据绑定。 试试看。 由于列表中有四个项目,所以应该显示消息。

    5.3K10

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

    NgClass 您通常通过动态添加和删除CSS类来控制元素的显示方式。 你可以绑定到ngClass来同时添加或删除多个类。 class绑定是添加或删除单个类的好方法。 <!...NgStyle 您可以根据组件的状态动态设置内联样式。 使用NgStyle,您可以同时设置多个内联样式。 样式绑定是设置单个样式值的简单方法。...NgFor:为列表中的每个项目重复一个模板。 NgSwitch:只显示多个可能元素中的一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。...在等待数据的时候,视图应该没有怨言地呈现,而null属性路径应该像title属性一样显示为空白。 不幸的是,当currentHero为空时,应用程序崩溃。 你可以用*ngIf来解决这个问题。 在诸如a.b.c.d这样的长属性路径中的某个地方防止空值。 Angular安全导航操作符(?.)是一种更为流畅和方便的方法来防止在属性路径中出现空。表达式在达到第一个空值时会被释放。

    30K20

    Angular2 之 结构型指令几个概念

    (* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化的途径。...总结 基于上面的利弊分析,无论是我们在使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。...标签 结构型指令,比如ngIf,使用HTML 5的template标签 完成它们的“魔法”。 控制Template标签内DOM添加与显示,在模板级别使用的。...,可以有多个名称,由于是自己的指令,所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export class UnlessDirective {...要么显示的包含在Template标签中,要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。

    3K20

    Angular 显示英雄列表

    > 元素,以显示单个 hero 的属性。...固然,你可以把更多样式加入到 styles.css,并且放任它随着你添加更多组件而不断膨胀。 但还有更好的方式。...英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4.4K70

    浅谈Angular

    ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除结构型指令 *ngIf--控制元素的显隐性 ?...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...来控制元素的显隐 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\....可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器 如果要通过指令控制DOM的显隐... 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法

    4.4K10

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

    {{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css中的display:none效果是一致的,和visibility...:hidden是要区别开的,当if判断为false的时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 在需要使用数据绑定的组件进行数据的处理 import { Component, OnInit...false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断的一些元素或者段落可以使用这个进行包裹...运行效果 如果这个tag标签不太理解的,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个,在html的任何场景下都可以使用!...官方的话:为没有 DOM 元素的指令安排宿主 管道 管道其实就是具有一定功能的函数,主要是一些场景是对字符串什么的进行简单的转化,当然我们也可以自己使用自定义的函数进行数据的转换,只是angular给我们提供了一些初始化的功能函数管道详细列表

    2.6K30

    Angular 显示英雄列表

    > 元素,以显示单个 hero 的属性。...固然,你可以把更多样式加入到 styles.css,并且放任它随着你添加更多组件而不断膨胀。 但还有更好的方式。...英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4K30

    Python自学之路-list、tuple、dict和set

    一、list Python内置的一种数据类型是列表:list。list是一种有序的集合,可以随时添加和删除其中的元素。...', 'Qingdao', 'Beijing', 'Guangzhou', 'Suzhou', 'Wuhan'] 删除置顶位置的元素使用pop(i),i为索引位置,不填表示删除末尾的元素: >>> citys.pop...list定义时是使用[],而tuple是使用() 由于定义的tuple不能变,所以也就不存在append(),insert()这样的方法,但其他获取元素的方法还是和list一样的。...相较于list而言,dict的查找和插入的速度极快,同时也不会随着key的增加而变慢。但同时,所占用的内存也相对较多。...大家可以看到,重复元素在set中自动被过滤,同时显示的顺序也不表示set是有序的 >>> s = set([11, 22, 33,44,55,44,55]) >>> s {33, 11, 44, 22

    48020

    理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

    接下来我们改变单位为 月 ,那这时候年龄数据的最新值仍然是 3 ,所以新流的数据应为 3月等等以此类推。 这样的一种合并方式在 Rx 中专门有一个操作符来处理,那就是 combineLatest。...响应式表单中的 Rx Angular 的表单处理非常强大,有模版驱动的表单和响应式表单两类,两种表单各有千秋,在不同场合可以分别使用,甚至混合使用,但这里就不展开了。...]="xxx" 指令,这个 xxx 就是你在组件中声明的 FormGroup 类型的成员变量:比如下面代码中的 form: FormGroup; 3、在组件的构造函数中取得 FormBuilder 后(...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能的。...这个 else 可以携带一个模版的引用。比如下面例子中:如果用户登录成功显示用户名,否则显示登录链接。 另一个改进是 ngIf 中现在可以将评估表达式的结果赋值给一个变量,好处是什么呢?

    5.3K10

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

    ---- 前言 这一篇我们带来的是关于组件基础使用的最后一块,内容投影和Vue中的插槽很类似,在组件封装的时候非常有用,我们一起来体验一下。 正文 1....在这种情况下,不建议使用 ng-content 元素,因为只要组件的使用者提供了内容,即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部,该内容也总会被初始化...使用 ng-template 元素,你可以让组件根据你想要的任何条件显式渲染内容,并可以进行多次渲染。在显式渲染 ng-template 元素之前,Angular 不会初始化该元素的内容。...使用ng-container定义我们的投影区块 使用ngTemplateOutlet指令来渲染ng-template元素。 通过内置的动态指令*ngIf来控制是否渲染投影。...: ContentDirective; } 通过日志可以看到我们在切换容器组件的expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然在页面看不到渲染的内容,但组件实实在在被初始化过了

    55630

    【技巧】ionic3独享滚动区域之滑动segment

    想象一下这样一个场景,通过segment切换页面,通过*ngIf等类似指令来模拟显示不同页面的内容,代码表示如下: ngIf="vm.selectedSegment...ion-content的滚动条的,也就是说,当列表1滚动到一定距离,当切换到列表2显示时,列表2已滚动到列表1所在的位置了(效果图我就不上了),鉴于此,我们可以在每个div外面再包一层,此层的滚动区域代替...注意:这里的selectedSegment我使用了字符串,而不是理论上应该适用的整型,因为版本问题,整型值赋给ion-segment-button的value时,内部有时把它处理为整型,有时又处理为字符串型...,这样双向绑定就对应不上,为免麻烦,故使用字符串值。...此时试着运行可以看到效果,只是此时的效果并不是想要的效果,因为ion-slides是默认居中,且禁用垂直滚动的!

    1.8K20

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

    它是语法中不可或缺的一部分 通过 NgIf 进行条件显示 有时,应用需要只在特定情况下显示视图或视图的一部分,这个时候使用ngif,同vue.js里的v-if ngIf="heroes.length...绑定语法 数据绑定是一种机制,用来协调用户所见和应用数据。绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。...然后,用封装了 HTML 的组件创建新元素,并把它们当作原生 HTML 元素在模板中使用。 在元素层面上,既要设置元素属性,又要监听元素事件变化。Angular 为此提供一种特殊的双向数据绑定语法:[(x)]。 [(x)] 语法结合了属性绑定的方括号[x] 和事件绑定的圆括号(x)。...) 和空属性路径 Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式,用来保护出现在属性路径中 null 和 undefined 值。

    15.3K30

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

    必备条件 在继续本“英雄之旅”页面之前,请确认您在“英雄编辑器”页面之后具有以下结构。 如果您的结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。...你可以在模板中引用这个变量来访问当前英雄的属性。...刷新浏览器,该应用程序不再失败,名称列表再次显示在浏览器中。 当没有选定的英雄时,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示在列表下方时,很难在列表中识别选定的英雄。...您将Hero类移到lib / src下的自己的文件中。 你增加了选择英雄和显示英雄的细节的能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor。

    3K30

    【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

    我们观察initSwiper方法,第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托dom操作的,此外,由于我们使用了数据绑定,this.vm.dessertSlides...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用的多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...是的,在大多场景中可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。...是因为该组件在异步获取到数据this.vm.dessertSlides前已完成了初始化了,这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,为ion-slides组件加上一段*ngIf=

    1.5K20

    Angular 从入坑到挖坑 - 组件食用指南

    ,因此要确保一个模板中的引用变量名称是唯一的,同时,在声明引用变量时,也可以使用 ref- 代替 # NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示在页面上,当属性值为 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的...,可以使用管道对于表达式的结果进行转换 管道是一种简单的函数,它们接受输入值并返回转换后的值。...在组件中使用服务 在需要使用的组件中引入服务,然后在组件的构造函数中通过依赖注入的方式注入这个服务,就可以在组件中完成对于这个服务的使用 在父组件中对数据进行赋值,然后调用服务的方法改变数据信息...---- 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上,就像是 C# 中的特性↩ 元数据是用来描述数据的数据项,例如这里的 selector 是为了描述 Component

    15.8K30
    领券