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

Angular 2- *ngIf使用else块会给我“无法绑定到'ngIfElse'",但*ngIf不使用else块可以工作

Angular 2中的*ngIf指令用于根据条件来显示或隐藏HTML元素。当条件为真时,元素会被渲染,否则会被移除。

在使用ngIf指令时,可以选择性地添加else块来定义当条件为假时要显示的内容。然而,当你在使用ngIf指令时,却没有添加else块时,却遇到了“无法绑定到'ngIfElse'”的错误。

这个错误通常是由于忘记在模板中定义else块导致的。为了解决这个问题,你需要在模板中添加一个else块,并为其指定一个模板引用变量。然后,你可以在*ngIf指令的else属性中引用这个变量。

下面是一个示例,展示了如何正确使用*ngIf指令和else块:

代码语言:html
复制
<div *ngIf="condition; else elseBlock">
  <!-- 条件为真时显示的内容 -->
</div>

<ng-template #elseBlock>
  <!-- 条件为假时显示的内容 -->
</ng-template>

在这个示例中,当条件为真时,div元素会被渲染,否则elseBlock中的内容会被渲染。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)是一种弹性计算服务,提供安全可靠、弹性扩展的云端计算能力,适用于各类应用场景。您可以通过以下链接了解更多信息:

腾讯云云服务器产品介绍:https://cloud.tencent.com/product/cvm

请注意,以上答案仅供参考,具体的解决方法可能因实际情况而异。

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

Angular不断检查可能影响数据绑定的更改。 无论组件在做什么,它都会继续这样做。 虽然看不见,组件及其所有后代组件都会占用资源。 性能和记忆负担可能很大,响应性可能降低,用户什么也看不到。...当你编写自己的结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor的源代码是了解更多信息的好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板的单个实例中引用。...虽然很少有理由在模板属性或元素形式中应用结构指令,了解Angular创建并了解它的工作原理仍然很重要。 当你编写自己的结构指令时,你参考。..._viewContainer); myUnless属性 指令消费者期望将真/假条件绑定[myUnless]。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作

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

    知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构的指令。...这会将其转换为方括号 [] 中的属性绑定,比如 [ngIf]。 的其余部分,包含类名,插入 里。...比如: {{worker.name}} Angular 结构指令是怎么工作的...Angular 中我们什么时候需要用结构指令呢? 如果你想在 DOM 中添加或者移除一个元素的时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。...总结 结构指令是 Angular 中很重要的一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文为译文,采用意译的形式。

    3.8K20

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

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

    2.5K30

    AngularDart4.0 指南- 显示数据 顶

    可以通过将HTML模板中的控件绑定Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...用插值显示组件属性 显示组件属性的最简单方法是通过插值来绑定属性名称。 使用插值,可以将属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。...> ''', Angular自动从组件中抽取title和myHero属性的值,并将这些值插入浏览器中。...在这种情况下,ngFor正在显示一个列表,ngFor可以为任何Iterable对象重复项目。 @Component(directives:...)...概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML

    5.3K10

    ng-content 中隐藏的内容

    如果你尝试在 Angular 中编写可重复使用的组件,则可能接触到内容投射的概念。然后你发现了 ,并找到了一些关于它的文章,进而实现了所需的功能。...但是如果你通过按钮进行切换操作,你注意计数器的值不会增加。这意味着我们的计数器组件只被实例化了一次 - 从未被销毁和重新创建。...因此,投影内容的生命周期将被绑定它被声明的地方,而不是显示在地方。 这种行为有两个原因:期望一致性和性能。什么 “期望的一致性” 意味着作为开发人员,可以基于应用程序的代码,猜测其行为。...将组件的生命周期被绑定到我们的应用程序组件而不是包装器的意义是,开发者可以掌控计数器只被实例化一次,而不用了解第三方库的内部代码。 性能的原因更为重要。...因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序的工作量。

    2.7K30

    Angular2 之 结构型指令几个概念

    属性型指令 属性型指令修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局。...angular继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行!它还是占用着那么多的资源。 另外一方面,重新显示这个组件很快。...组件以前的状态被保留着,并随时可以显示。组件不用重新初始化,当然,该操作付出代价比较大! 移除元素组件 利 把ngIf设置为false,将会影响组件的资源消耗。...弊 如果我们很快再次使用这个组件的时候,重建组件的代价是非常大的。 当ngIf重新变成true的时候,angular重新创建该组件及其子树。angular重新运行每个组件的初始化逻辑。...而在Angular应用中,Angular移除 标签及其子元素。 我们可以通过把短语"Hip! Hip! Hooray!"

    3K20

    Angular DOM 抽象概述

    这在大多数情况下,是没有问题的,如果我们开发的应用要支持跨平台的话,就不能绑定宿主环境为浏览器。...模板元素是一种机制,允许包含加载页面时渲染,但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。...为我们开发者提供了 元素,在 Angular 内部它主要应用在结构指令中,比如 *ngIf、*ngFor 等。...ViewRef ViewRef 是一种抽象类型,用于表示 Angular 视图。在 Angular 中,视图是构建应用程序 UI 界面基础构建。...的初学者,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons

    3.5K30

    浅谈Angular

    AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据 HTML。 AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。...1.准备工作: ①全局安装 Angular CLI。...创建项目: 要想使用 npm 来安装 CLI,请打开终端/控制台窗口,并输入下列命令: npm install -g @angular/cli ②创建工作区和初始应用:ng new 文件名 ③启动开发服务器...可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器 如果要通过指令控制DOM的显隐...,init方法不会再走,导致当前数据无法更新 解决办法: 使用RxJS解决,RxJS提供响应式开发(基于观察者模式),我们可以订阅某个值,一旦该值被订阅,如果其存储的数据发生变化,订阅者就会收到通知

    4.4K10

    Angular 显示英雄列表

    那个样式表并不包含英雄列表所需的样式。 固然,你可以把更多样式加入 styles.css,并且放任它随着你添加更多组件而不断膨胀。 还有更好的方式。...click 外面的圆括号Angular 监听这个  元素的 click 事件。 当用户点击  时,Angular 就会执行表达式 onSelect(hero)。...模板中的绑定表达式引用了 selectedHero 的属性(表达式为 {{selectedHero.name}}),这必然失败,因为你还没选过英雄呢。 现在,从列表中随便点击一个条目。...所以你只要在用户点击一个  时把 .selected 类应用到该元素上就可以了。 Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4.4K70

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

    因此,使用样式属性名称的dash-case通常是首选。 事件绑定((event)) 到目前为止,您所遇到的绑定指令可以在一个方向上流动数据:从一个组件一个元素。 用户不只是盯着屏幕。...在Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强的Angular绑定系统获得相同的结果。 当你可以写一个简单的绑定时为什么要创建一个指令来处理点击呢?...NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。 在此示例中,将指令绑定条件表达式,如isActive。...警惕隐藏大型组件树; NgIf可能是更安全的选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用的。 如果嵌套表达式试图访问null属性,Angular抛出一个错误。...您可以定义一个HTML来定义应该如何显示单个项目。 您告诉Angular将该用作呈现列表中每个项目的模板。

    30K20

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

    投影一内容 容器组件这样写 编号1 业务组件这样用 未指定投影位置的内容会被投影无...投影多内容/组件 容器组件这样写 使用标签锁定投影位置 使用class锁定投影位置 用自定义组件名称锁定投影位置 使用自定义属性锁定投影位置 编号2 <ng-content select...在这种情况下,建议使用 ng-content 元素,因为只要组件的使用者提供了内容,即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部,该内容也总会被初始化...使用 ng-template 元素,你可以让组件根据你想要的任何条件显式渲染内容,并可以进行多次渲染。在显式渲染 ng-template 元素之前,Angular 不会初始化该元素的内容。...: ContentDirective; } 通过日志可以看到我们在切换容器组件的expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然在页面看不到渲染的内容,组件实实在在被初始化过了

    54830

    AngularDart4.0 指南-体系结构概述 顶

    虽然根模块可能是小应用程序中的唯一模块,大多数应用程序都有更多的功能模块,每个模块都是专用于应用程序域,工作流程或紧密相关的一组功能的一致代码。...Angular支持数据绑定,这是一种协调模板部分与组件部分的机制。 添加绑定标记模板HTML告诉Angular如何连接双方。 如图所示,有四种形式的数据绑定语法。...,与属性绑定一样,数据属性值将从组件输入输入框中。...用户的更改也返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树的根所有子组件。 ?...出于这个原因,这个应用程序的JavaScript和TypeScript版本可以使用selectedHero作为* ngIf表达式的值。 Dart版本必须使用布尔运算符!=替换。

    7.9K30

    Angular 从入坑挖坑 - 表单控件概览

    从入坑弃坑 - Angular 使用入门 Angular 从入坑挖坑 - 组件食用指南 Angular 从入坑挖坑 - 表单控件概览 三、Knowledge Graph ?...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...4.3.3、使用 FormBuilder 生成表单控件 当控件过多时,通过 FormGroup or FormControl 手动的构建表单控件的方式很麻烦,因此这里可以通过依赖注入 FormBuilder

    18.9K20

    Angular 显示英雄列表

    那个样式表并不包含英雄列表所需的样式。 固然,你可以把更多样式加入 styles.css,并且放任它随着你添加更多组件而不断膨胀。 还有更好的方式。...click 外面的圆括号Angular 监听这个  元素的 click 事件。 当用户点击  时,Angular 就会执行表达式 onSelect(hero)。...模板中的绑定表达式引用了 selectedHero 的属性(表达式为 {{selectedHero.name}}),这必然失败,因为你还没选过英雄呢。 现在,从列表中随便点击一个条目。...所以你只要在用户点击一个  时把 .selected 类应用到该元素上就可以了。 Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4K30

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

    -- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定模板,迭代它们,并单独显示它们。...接下来,您将通过selectedHero组件属性将主链接到详细信息,该属性绑定单击事件。...Angular无法显示null selectedHero的属性并抛出以下错误,在浏览器的控制台中可见: EXCEPTION: TypeError: Cannot read property 'name...当没有选定的英雄时,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...当表达式为false时,Angular删除选定的类。 ===运算符测试给定的对象是否相同。 在模板语法指南中阅读有关[class]绑定的更多信息。

    3K30

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

    3、填年龄时,出生日期随之变化,因为无法精确,所以只需精确选择的单位即可。...响应式表单中的 Rx Angular 的表单处理非常强大,有模版驱动的表单和响应式表单两类,两种表单各有千秋,在不同场合可以分别使用,甚至混合使用这里就不展开了。...所幸的是,Angular 提供了对于响应式编程非常友好的设计,我们完全可以不在代码中做订阅或取消订阅的动作。那么问题来了,订阅的话,值怎么获得呢?答案是 Async 管道。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了,如果你曾经使用Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能的。...这个 else 可以携带一个模版的引用。比如下面例子中:如果用户登录成功显示用户名,否则显示登录链接。 另一个改进是 ngIf 中现在可以将评估表达式的结果赋值给一个变量,好处是什么呢?

    5.3K10

    ionic3应该善用组件和指令

    其实ionic3(angualr4)和ionic2(angular2)差不多,和ionic1(angular1)就差别非常大了,可以说基本是推倒了重来。...在angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊的指令,已经有一定目的明显区分开来,分别用Directive和Component...往往很多人封装组件,但不会去封装指令,而选择用Provider或者Pipe(管道,相当于angular1时的过滤器filter),甚至样式来实现,虽说这也能解决部分问题,但不是最优的,Directive...,有兴趣的可以自行了解下Renderer 3)使用指令 如果调用的页面用了懒加载,在调用指令的页面module.ts里导入指令并声明,反之,在app.module.ts里导入指令并声明,这样调用的组件就能识别该指令了...isExpand"> 一段文字 效果图上了,留待你们试验,哇咔咔。

    3.5K40
    领券