开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

这个*ngIf在Angular 7中有什么问题？

在Angular 7中，*ngIf指令存在以下问题：

重绘性能：*ngIf指令会在每次条件表达式发生变化时触发组件的重绘，这可能会导致性能下降，尤其是在有大量嵌套的条件语句时。
不支持动画效果：由于*ngIf指令是通过添加或移除DOM元素来实现条件显示或隐藏，因此无法直接支持动画效果。如果需要动画效果，需要额外的处理。
导致组件状态丢失：当*ngIf指令从条件为true切换到false时，相关组件及其状态将被销毁，这可能导致组件状态的丢失，包括表单输入的值等。
与ng-container的交互：*ngIf指令不能直接应用于ng-container元素，而需要使用ng-template作为中间包装层来实现条件渲染。

解决上述问题的方法如下：

使用ng-container：将*ngIf指令应用于ng-container元素，然后在ng-container内部使用ng-template来包裹需要条件显示的内容。这样可以避免不必要的DOM操作，提高性能。
使用ngIfElse：通过ng-template的else属性，可以在*ngIf条件为false时显示备用内容，这样可以实现条件渲染的动画效果。
使用ngSwitch：如果需要多个条件判断，可以考虑使用ngSwitch指令，它可以更清晰地表示多个条件的逻辑。
使用ChangeDetectionStrategy.OnPush：通过设置组件的变更检测策略为OnPush，可以避免不必要的组件重绘，提高性能。

腾讯云提供了云计算相关产品，包括云服务器、云数据库、云存储等。你可以在腾讯云的官方网站上了解更多产品信息和使用方法。

腾讯云产品介绍链接地址：https://cloud.tencent.com/product

相关搜索:在Angular 7中如何使用*ngIf in *ngFor？这个替换程序在JavaScript中有什么问题？Angular 6/7，ngFor中的ngIf 这个kotlin null安全性在when中有什么问题？在Angular 7中，当在*ngIf中使用时，ViewChild未定义如何使用ngIf在Angular 7中的三个页面之间切换？在Angular中使用*ngIf不起作用在Angular中如何使用*ngFor和*ngIf？Angular ngIF在组件内部无法正常工作 Angular 6-在组件加载后更新*ngIf 避免在Angular中使用`*ngIf`时的延迟在Angular中，使用*ngFor In *ngIf不起作用在组件html中使用OR的Angular *ngIf条件这个常数在Kohana中有什么意义？在WPF中这个imagesource有什么问题？在Angular 7中有条件地禁用ngFor中的按钮 Angular的ngIf在计算条件之前显示else模板在angular中使用*ngIf和else时出现错误在angular中的*ngIf内引导弹出失败在Angular中的ngIf条件中使用拆分函数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

文章目录前文回顾基本语法常见指令 NgModel NgFor NgIf Ng-container 管道前文回顾前面已经写了关于angular项目的基本介绍和如何创建一个angular项目，这一篇主要梳理一些...，但是在angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变！...在app.modules.ts中引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据的双向绑定 import...，因为他是一个不被渲染的tag，所以使用的时候是没有什么问题的，举个例子！...运行效果如果这个tag标签不太理解的，你可以将它完全当作一个容器，当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个，在html的任何场景下都可以使用！

2.5K3 0

Angular 显示英雄列表

click 外面的圆括号会让 Angular 监听这个元素的 click 事件。当用户点击时，Angular 就会执行表达式 onSelect(hero)。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...英雄们显示在列表中，并且所点英雄的详情也显示在了页面的下方。修复 - 使用 *ngIf 来隐藏空白的细节该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...并且为这个 div 添加 Angular 的 *ngIf 指令，把它的值设置为 selectedHero。不要忘了 ngIf 前面的星号（*），它是该语法中的关键部分。...这个应用看起来又再次工作正常显示了。英雄显示在列表中，当你单击英雄的名字的时候，有关你单击英雄的详细信息就显示在页面的底部了。

4.4K7 0

AngularDart4.0 指南- 显示数据顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。在这个页面中，您将创建一个包含英雄列表的组件。您将显示英雄名单的列表，并有条件地在列表下方显示一条消息。...修正这个问题，只显示英雄的name属性。... 不要忘记* ngIf中的星号（*）。这是语法的重要组成部分。在“模板语法”页面的ngIf部分阅读有关ngIf和*的更多信息。...双引号内的模板表达式，* ngIf =“heros.length> 3”，看上去和表现很像Dart。当组件的英雄列表中有三个以上的项目时，Angular会将该段落添加到DOM，并显示消息。...这可以提高性能，特别是在大型项目中，当有条件地包含或排除大量的HTML与许多数据绑定。试试看。由于列表中有四个项目，所以应该显示消息。

5.3K1 0

AngularDart 4.0 高级-结构指令顶

Angular将这个符号解析成一个围绕宿主元素及其后代的标记。每个结构指令都与该模板有所不同。...三种常见的内置结构指令 - NgIf，NgFor和NgSwitch ... - 在模板语法指南中进行了描述，并在整个Angular文档中的示例中进行了介绍。...研究NgIf和NgFor的源代码是了解更多信息的好方法。模板输入变量模板输入变量是一个变量，其值可以在模板的单个实例中引用。在这个例子中有几个这样的变量：hero，i和odd。...满足Angular模板中的类似需求。编写一个结构指令在本节中，您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。...该前缀属于Angular。选择适合您或您公司的简短内容。在这个例子中，前缀是my。指令类名称以Directive结尾。 Angular自己的指令不会。

16.1K2 0

Angular 显示英雄列表

click 外面的圆括号会让 Angular 监听这个元素的 click 事件。当用户点击时，Angular 就会执行表达式 onSelect(hero)。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...英雄们显示在列表中，并且所点英雄的详情也显示在了页面的下方。修复 - 使用 *ngIf 来隐藏空白的细节该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...并且为这个 div 添加 Angular 的 *ngIf 指令，把它的值设置为 selectedHero。不要忘了 ngIf 前面的星号（*），它是该语法中的关键部分。...这个应用看起来又再次工作正常显示了。英雄显示在列表中，当你单击英雄的名字的时候，有关你单击英雄的详细信息就显示在页面的底部了。

4K3 0

Angular 6.x 表单快速入门

Angular 中有两种表单： Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms - 响应式表单 Template...在 Angular 表单中，我们通过 ngModel 指令来实现双向绑定。...在 Angular 中，我们可以使用熟悉的标签来创建表单。...在 Angular 中，我们通过方式添加单选控件。...在 Angular 中，我们通过方式添加多选控件。

4.6K2 0

Angular 6.x 快速入门

第二节 - 插值表达式在 Angular 中，我们可以使用插值语法实现数据绑定。...基础知识定义组件的元信息在 Angular 中，我们可以使用 Component 装饰器来定义组件的元信息： @Component({ selector: 'my-app', // 用于定义组件在...Angular 实际项目中，最常用的指令是 ngIf 和 ngFor 指令。...2.x', 'Angular 4.x', 'Angular 6.x']; } } 第五节 - 事件绑定在 Angular 中，我们可以通过 (eventName) 的语法，实现事件绑定。...this.showSkills; } } 第六节 - 表单模块简介 Angular 中有两种表单： Template Driven Forms - 模板驱动式表单 (类似于 AngularJS

14.1K2 0

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

在 Angular 中，有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。结构指令是 Angular 中最强大的特性之一，然而它们却频繁被误解。...你将学到什么在本文中，你将学到关于 Angular 结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。学完本文，你将更好理解这些指令并在实际项目中使用它们。...在 Angular 中，有三种标准的结构化指令。...{{worker.name}} Angular 生成一个的元素，然后应用 *ngIf 指令。...4', 'worker 5', ] constructor() { } ngOnInit(): void { } } 怎么使用 *ngSwitch 指令译者加：这个指令实际开发很有用

3.8K2 0

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

然后再Client.Component里面, 注入ClientService, 在NgOnInit里面调用查询方法: import { Component, OnInit } from '@angular...(appRoutes), HttpModule, FormsModule ], 现在应该是这个样子: ?...再安装一个库: npm install --save angular2-flash-messages 这个库可以略微灵活的显示提示信息. npm install --save angular2-flash-messages...在app.module里面: import { FlashMessagesModule } from 'angular2-flash-messages'; imports: [ BrowserModule...大约这个样子.

4.3K5 0

Angular2 之结构型指令几个概念

它仍然附加子啊它所属于的DOM元素上，它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行！它还是占用着那么多的资源。...弊如果我们很快再次使用这个组件的时候，重建组件的代价是非常大的。当ngIf重新变成true的时候，angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。...标签结构型指令，比如ngIf，使用HTML 5的template标签完成它们的“魔法”。控制Template标签内DOM添加与显示，在模板级别使用的。...在Angular应用之外，标签的默认CSS属性display是none 。它的内容存在于一个隐藏的文档片段中。...，在Angular的控制下，DOM的效果是不同的。 ?

3K2 0

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

在使用 ngModel 进行模板绑定时，angular 在 form 标签上自动附加了一个 NgForm 指令，因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素，而...name 属性则是 angular 用来注册控件的 key，所以在表单中使用 ngModel 进行双向数据绑定时，必须要添加 name 属性 4.2.2、跟踪表单控件的状态在表单中使用 ngModel...，一个 FormControl 类的实例对应于一个表单控件，在使用时，通过将控件的实例赋值给属性，后续则可以通过监听这个自定义的属性来跟踪表单控件的值和状态 import { Component, OnInit...FormControl、FormGroup 和 FormArray 使用 FormBuilder 构建的控件，每个控件名对应的值都是一个数组，第一个值为控件的默认值，第二项和第三项则是针对这个值设定的同步...g directive direactives/hero-validate 在创建完成指令之后，我们需要将这个指令将该验证器添加到已经存在的验证器集合中，同时为了使这个指令可以与 angular 表单集成在一起

18.9K2 0

ng-content 中隐藏的内容

如果你尝试在 Angular 中编写可重复使用的组件，则可能会接触到内容投射的概念。然后你发现了，并找到了一些关于它的文章，进而实现了所需的功能。...为了处理这个问题，支持一个 select 属性，可以让你在特定的地方投射具体的内容。...为了解决这个问题，我们必须使用 ngProjectAs 属性，它可以应用于任何元素上。...在我们尝试解释为什么之前，让我们再来验证一个问题，即在 ng-content 指令的外层容器中添加 ngIf 指令： import { Component } from '@angular/core';...难道这是 ngIf 指令产生的问题，让我们测试一下 ngFor 指令，看看是否有同样的问题： import { Component } from '@angular/core'; @Component

2.7K3 0

Ionic3 表单处理

在项目中，可以使用angular中的 @angular/forms模块处理表单，但是并不需要在app.module中引用@angular/forms模块，因为在app.module中已经引入了@angular.../platform-browser模块，而在@angular/platform-browser模块中又导出了 @angular/forms 。...也就是说，引入@angular/platform-browser模块之后就可以直接使用@angular/forms模块中提供的组件等内容。...使用过程从@angular/forms中引入需要用到的内容 import {FormBuilder, Validators, FormGroup} from '@angular/forms'; 对应的表单初始化如下...info}} 当校验不通过的时候，就会在这个div上显示在 login.ts 中定义的提示信息。以下是测试结果，仔细看 ?

1.3K1 0

过渡到 Angular 17 的新控制流语法

传统指令与Angular 17的控制流语法对比让我们使用一些示例来比较传统指令和Angular 17的控制流语法：*ngIf指令 vs @if控制块Before（传统 *ngIf）：*ngIf指令和async管道 vs @if和asyncBefore（带有 *ngIf 的 async 管道）：...例如，在某些情况下，您可以使用 @defer 块来延迟加载内容。向后兼容性和性能Angular 17允许您在应用程序中同时使用新旧语法。...结论Angular 17引入的新控制流语法在处理Angular应用程序中的模板和渲染逻辑方面带来了显著的改进。转换到这种新语法，承诺会使我们的代码更易读、易维护和高性能。...正如我们在自己的项目中所经历的，这些变化不仅是外观上的改变，而且是功能上的改变，提升了我们使用Angular的方式。我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

6752 0

使用angular4和asp.net core 2 web api做个练习项目(三)

在VS解决方案中设置多个项目同时启动: AspNetIdentityAuthorizationServer就是authorization server.... 这个html, 基本是看不见的....以便切换导航栏的按钮显示情况. angular的部分先到这, 然后要修改一个identity server的配置: 在VS2017打开AspNetIdentityAuthorizationServer...这个项目的Config.cs文件, 看GetClients()那部分, 里面有一个Client是js client, 我们就用这个.... // JavaScript Client...这里面使用了C# 7的命名Tuple, 非常好用. 差不多可以了, 运行VS. 同时运行angular项目: 1. 首次浏览: 2.

1.3K8 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

---- 基础概念国内的官网--基础词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法，相当于一本小字典关于ng2的一堆为什么:...import { FormsModule } from '@angular/forms'; // rest风格的请求模块 import { HttpModule } from '@angular...，let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个...,当前不在乎低版本的可以用[hidden]来控制切换，因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。...其他的一丢丢废话：若是学会了ng2技术栈，其实你过程接触了Typescript，Rxjs，es6&7等

6.2K2 0

在前端中理解MVC服务之 Angular篇(完结)

ReactiveFormsModule], providers: [UserService], bootstrap: [AppComponent] }) export class AppModule {} 我们可以看到,在我们的应用中有三个模块..._commit(this.users); } 这个负责存储在Localstarage中的方法仍然有待定义： _commit(users: User[]) { localStorage.setItem...Angular 执行此任务，在Cont和Model之间执行绑定。..._commit(this.users); } } Views 这个部分与前两篇文章相比，是变化最大的一部分，在这种情况之下，我们不需要使用DOM，因为Angular将执行动态操作 DOM 的艰巨任务...但是，我们注意到，前几部分中的许多 DOM 操作代码已通过 Angular 得到解决，它们提供了两个结构指令，如 @ ngFor 和 _ ngIf，它们允许从模板本身轻松操作 DOM。

4.1K2 0

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

/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms';...{{uploadTitleName}}删除</a.../assets/scss_styles/custom_scss/_custom-export.scss'; $iu-border:#e7e7e7 !...我们这里是考虑environment这个来存放各种配置相关的信息，所以就独立出来了，正常逻辑是封装到组件内的。...至此，一个不怎么靠谱的上传组件诞生了，你可以在这个基础二次定制; 有更好的写法或者建议的也可以留言指出，谢谢

9781 0

浅谈Angular

1.准备工作: ①全局安装 Angular CLI。...*ngIf--控制元素的显隐性 ?:ng-show和*ngIf的区别是什么?...:ng-show和*ngIf的区别是什么?...可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器如果要通过指令控制DOM的显隐...,要声明在子组件里 2.子向父 -- @Output装饰器声明事件,要声明在子组件里 3.兄弟之间 -- 中间人模式拓展:事件源对象在事件中，当前操作的那个元素就是事件源。

4.4K1 0

SNS项目笔记--fab与遮罩

消失 c、在遮罩显示下，点击遮罩，遮罩消失，fabList消失于是我们总结出，我们需要给fab绑定一个点击事件，然后需要给遮罩也绑定一个点击事件，通过*ngIf来完成显示和消失...QueryList } from '@angular/core'; import { Platform } from '../.....transition-delay: initial; transition-property: none;"> 这里利用isShow的布尔值来处理判断是否显示遮罩，div中有个...backdropclick($event)的click事件，通过这个事件来完成遮罩的点击显示隐藏处理，另event.preventDefault();与event.stopPropagation()；方法来阻止事件冒泡...from '@angular/core'; isShow?

9224 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭