这个*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
相关·内容
此*ngIf指令出了什么问题 *ngIf="{{text}}=={{display.company}} ||{{text}}=={{display.field}}||{{text}}==
{{display.sub_field
浏览 9提问于2019-06-09得票数 2
1回答
我正在开发一个Angular 4应用程序，并希望仅当totalYears <= 7时才显示列。我在th元素中有一个ngFor和一个ngIf。我目前收到一个错误。我该怎么处理呢？-- <ng-container *ngIf="yearList.length > 6"> -->
<th *ngIf="totalYears <=7" *ngFor="le
浏览 7提问于2018-02-05得票数 0
回答已采纳
在启动时，由于*ngIf中的条件，A会出现。A使用EmbeddedView显示显示图像缩略图。A还有一个按钮，当单击该按钮时，它会更改*ngIf的条件并显示B (因为B显示在*ngIf的其他条件上)。A的超文本标记语言类似于 <div *ngIf="this.tabType == this.questionTab" id="form-div-question" class="body__div)">
浏览 11提问于2019-12-06得票数 0
Intellij，角2 HTML模板自动格式化<div id="content" *ngIf="company"><div class="panel-body">
<&
浏览 1提问于2017-02-24得票数 0
回答已采纳
1回答
在templateA中，我通过内部绑定绑定了componentA的一个属性。有一个填充(Obj)函数，它接收一个对象'options‘，然后使用它来获取一个对设置属性有用的值。在属性this.seq收到值之前呈现TemplateA视图。ComponentB.ts然后在ComponentA.ts中
浏览 2提问于2019-07-09得票数 1
2回答
= 'draft'">Initial</div>*ngIf已经加载我也不想这样做： <div *ngIf="Z !因此，与其
浏览 1提问于2017-03-30得票数 5
回答已采纳
3回答
我将在服务中有一个标志，它告诉我用户设备是移动设备还是桌面设备。在这两个视图中，状态和逻辑是相同的。桌面视图应该以表的形式显示数据，而移动视图应该以块的形式显示数据。
实现此行为的最佳方式是什么？
浏览 0提问于2017-10-27得票数 3
2回答
ts文件 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';import {ActivatedRoute} from '@angular/router';
import {MatTableDataSource} from '@<
浏览 28提问于2020-09-22得票数 0
我想检查组件在Angular2中是否有一个属性。这是我的组成部分： selector: 'field-group, field-group[half]', <div class="field-group">
<label *ngIf=&
浏览 4提问于2017-01-22得票数 0
回答已采纳
我正在将一个旧的离子应用程序从V2移动到V4-alpha，并且无法使用异步管道在模板中绑定到可观察对象。当一个元素上的*ngFor嵌套在另一个带有*ngIf的元素中时，就会出现这个问题。不使用*ngIf时，该表显示正常，但包含*ngIf时不显示数据表，用于在不同数据表之间切换。：<div *ngIf="!/core : 0.6.0@ang
浏览 1提问于2018-06-09得票数 0
我的DocumentModel文档中有多个项目，除了“content”之外，我都想显示这些项目。
浏览 12提问于2018-12-17得票数 1
1回答
我在角2中有两个组件。/container-two';
selector: 'container-one'<div *ngIf="level > 0"/container-one';
selector: 'container-two'<div *ngIf="
浏览 2提问于2016-04-20得票数 1
4回答
目前我正在使用IF，但例如在Vue.JS中有。在Angular中是不是有类似的东西？<app-tabs-choice *ngIf="action.type == 'choice'"></app-tabs-choice>&
浏览 0提问于2019-12-11得票数 0
1回答
我正在开发一个Angular应用程序。我需要添加特殊的行为，所有的链接。在AngularJS中，只需编写如下指令： returnA', // do stuff };<
浏览 61提问于2015-12-21得票数 18
回答已采纳
AngularJS 1.x具有ngCloak指令，该指令用于防止Angular html模板以其原始(未编译)形式被浏览器短暂显示。Angular 2是否有任何这样的指令或功能来阻止这种原始(未编译)的表单显示。
浏览 4提问于2016-09-09得票数 23
回答已采纳
1回答
我真的不知道还有什么问题。服务代码：export class AuthService { constructor(private authService: AuthService) {}在HTML="/admin&quo
浏览 1提问于2018-07-21得票数 1
回答已采纳
我在Angular2中有两个同级组件：<testing *ngIf="data"testFunction($event){ }
我的问题是this.test1Ref是未定义的，因为test1组件有*ngIf</e
浏览 5提问于2016-12-13得票数 0
回答已采纳
1回答
用JSON数据创建的角动态表单
、、、、
"Great", "unproven": "Unproven" }}
我检索数据并以可观察的形式返回(在question.service.ts
浏览 0提问于2018-10-23得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
