在ngIf属性的计算结果为true后删除该属性
，意味着当ngIf条件为true时，该属性会被渲染到DOM中，而当条件为false时，该属性将从DOM中移除。
ngIf是Angular框架中的一个内置指令，用于根据条件动态地添加或移除DOM元素。它的计算结果可以是一个布尔值，也可以是一个返回布尔值的表达式。
优势：
- 提高性能：ngIf指令可以根据条件动态地添加或移除DOM元素，减少了不必要的DOM操作，从而提高了性能。
- 简化逻辑：通过ngIf指令，可以根据条件来控制DOM元素的显示与隐藏，简化了逻辑判断的过程。
- 提升用户体验：ngIf指令可以根据条件来显示或隐藏特定的内容，从而提升了用户的交互体验。
应用场景：
- 条件性显示：当需要根据条件来显示或隐藏某个DOM元素时，可以使用ngIf指令。
- 动态表单：当需要根据用户的选择来动态显示或隐藏表单字段时，可以使用ngIf指令。
- 权限控制：当需要根据用户的权限来控制某个功能或模块的显示与隐藏时，可以使用ngIf指令。
推荐的腾讯云相关产品和产品介绍链接地址：
腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云服务器、云存储、云函数等。以下是一些相关产品的介绍链接：
- 云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建、部署和管理云服务器实例。详情请参考：https://cloud.tencent.com/product/cvm
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种非结构化数据。详情请参考：https://cloud.tencent.com/product/cos
- 云函数（SCF）：无服务器函数计算服务，支持事件驱动的函数计算模型，可实现按需运行和弹性扩缩容。详情请参考：https://cloud.tencent.com/product/scf
请注意，以上链接仅为示例，具体的产品选择应根据实际需求进行评估和选择。
相关·内容
1回答
我是angular的新手，我正在尝试实现一个反应式表单。我只会放几行代码，这样更容易理解。我有一个父组件：
page: number;
ngOnInit() {
this.addProjectForm = this.formBuilder.group({
projectId: ['', Validators.required],
projectName: [''],
startDate: [''],
user: [this.user.email],
浏览 1提问于2021-03-08得票数 0
1回答
Angular6 -引用隐藏元素
、、、、
我有一个场景，我正在使用一个嵌入在我的html模板中的组件，我希望它被隐藏，直到复选框。但是，有一个条件可以确定"showControl“是否设置为true .条件是通过在控件上调用一个方法来确定的(这里是鸡和蛋场景)。
html如下：
<input type="checkbox" (click)="clickBox()" />
<div *ngIf="showControl">
<app-sample #appsampleref></app-sample>
</div>
浏览 0提问于2018-06-20得票数 1
回答已采纳
1回答
我尝试在一个元素上定义一个模板变量，并使用它的隐藏属性来确定该元素是否确实存在于DOM中，然后根据该属性显示另一个元素。但是如果有一个结构指令，模板变量似乎不会返回值。
<hr class="divider" *ngIf="true" #divi>
<div *ngIf="showResendWelcomeEmailButton">
<a *wpHasAnyPermission="[{'something': true}]"
#resendEmailBtn>
浏览 7提问于2017-07-22得票数 8
1回答
我有一个简单的指令myNgIf，它是ngIf的基本简化：
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[myNgIf]'
})
export class MyNgIfDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContaine
浏览 1提问于2018-02-06得票数 1
回答已采纳
我以为这会很简单，但看起来并非如此！
我正在尝试创建一个泛型属性指令，它将在我的服务中调用一个方法，并有条件地导致如果服务方法返回false，它所处的元素不会被添加到DOM中。基本上，ng-if，但ng-如果它在内部调用服务方法并对该执行操作
我有一个包含属性指令的元素:例如
<p ng-if="visible" my-directive>Hi</p>
我在visible指令中将myDirective设置为true。我原以为<p>元素会在visible无效时从DOM中移除，并在它真实时添加到DOM中。相反，ng-如果从来没有发现可见的，则在
浏览 3提问于2016-09-20得票数 0
回答已采纳
I下列角分量：
export class HeaderMainComponent {
@Input() showFullMenu: boolean = false;
}
然后，在HTMl上我有：
<p>{{showFullMenu}}</p>
<nav *ngIf="showFullMenu">
<li>Link 1</li>
<li>Link 2</li>
</nav>
变量showFullMenu呈现为false，但nav仍然显示。
我使用的模板如下：
<he
浏览 0提问于2018-12-14得票数 2
回答已采纳
我有一个很大的疑问，第一种情况会产生一个错误，但是如果我替换第二种情况就不会失败。 案例1： <div class="col-8" *ngIf="customstreetType">
<app-input-text
[valueIn]="_address?.custom_street_type"
(valueOut)="_address.custom_street_type = $event; change()"
></app-input-text>
浏览 78提问于2019-05-27得票数 1
1回答
我使用angularjs，我使用ng-if来显示和删除从google地图中显示地图的指令，但是每次我删除该指令并将其再次放入时，地图不会加载并且变灰。有没有人有任何想法或者知道我如何解决这个问题。
这是accordion代码：
<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="mission in missions" is-open="status.open">
<uib-acco
浏览 1提问于2016-03-31得票数 0
我遇到的问题是，我无法从*ngFor内的*ngIf语句中获得预期的功能。我使用它来迭代自定义验证消息，并且每个ngIf都有一个唯一的语句。以下是我正在使用的component.html文件：
<div class="form-group">
<label for="{{title}}">First Name:</label>
<input type="text" class="form-control" id="{{title}}" name="{{title}}&
浏览 5提问于2017-08-15得票数 1
我在使用@ViewChild时遇到了一个问题，该组件是通过ngIf显示的。我找到了各种各样的解决方案，但没有一个对我有用。这是我的主要组件，由各种步骤组成(为了简洁起见，我在代码中只显示了2个)，其中一个按钮用于向前导航，另一个按钮用于重置在第一步返回的组件。第一步在页面打开时显示：
...
<div class="my-container">
<first-child *ngIf="showFirtChild"></first-child>
<second-child *ngIf="showSe
浏览 0提问于2019-04-10得票数 25
我知道这不是最好的职位。但我在材料多选择自定义触发器示例中看到了这一行代码。
*ngIf="toppings.value?.length > 1"
我不明白什么是"?“在这里做的事情，我有一个困难的时间，甚至谷歌搜索它可能是(谷歌不喜欢问号)。这是否允许您安全地调用value的属性，而不必检查value是否已定义或为null？
浏览 0提问于2018-06-05得票数 0
回答已采纳
我有一些输入(复选框)，如果我的布尔值是真的，我希望它们被禁用。但这不管用..。有趣的是提交按钮工作得很好，同样的方法.
myComponent.html
<form [formGroup]="BetreuungsoptionForm" (ngSubmit)="onSubmit()">
<label *ngIf="!eingetragen" for="art">Art</label>
<select *ngIf="
浏览 1提问于2018-05-02得票数 62
回答已采纳
2回答
我已经通过一些引用在Angular2中创建了递归树，在模板中我获得了切换属性，在已使用的模型中没有声明任何切换属性或方法，但它仍然有效，有人可以解释它是如何工作的吗？
<li *ngFor="let childNode of taxonomyChildList"><input
*ngIf="childNode.hasMoreChildren"
type="checkbox" data-md-icheck
(click)="childNode.toggle=!childNode.toggl
浏览 0提问于2018-03-12得票数 1
回答已采纳
2回答
如何在ngIf中使用相同的模板
、、、、
我有很多条件来显示相同的模板。例如：
<template [ngIf]="item.url.indexOf('http') == -1">
<a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >
<span class="media-body media-middle" *ngIf="isUserLoggedIn
浏览 1提问于2017-09-06得票数 6
回答已采纳
我对Grails测试操作符感到困惑。
此表达式：
<g:if test="${!(preferences.displayOption.equals('ANA') || preferences.displayOption.equals('FLOP'))} ">
${!(preferences.displayOption.equals('ANA') || preferences.displayOption.equals('FLOP'))}
</g:if>
打印
false
这怎么可能呢？我正
浏览 0提问于2010-05-12得票数 3
回答已采纳
我有列表(ul)，并在5个列表元素(Li)上添加了ngIf条件。我想在ngIf条件满足或失败时调用一些方法。我在list元素上添加了指令，并在ngAfterViewInit()中调用了我的方法。但是当条件失败时，它不会被调用。请指点一下出去的路。这是我的一段代码。
<ul class="choose-list">
<li filter-selection (onWidthChange)="setfullWidth=$event" *ngIf="filter.country.name!=''"><sp
浏览 2提问于2017-02-16得票数 1
我一直在关注Angular文档中的表单验证，并注意到他们在另一个div中包装了一个错误消息div，用于检查该字段是否无效和被触摸。如下所示： <div *ngIf="name.invalid && name.touched">
<div *ngIf="name.errors.required" class="validators">Please
enter a name</div>
</div> 我试着不让父div像这样： <div *ngIf=&#
浏览 9提问于2019-01-17得票数 0
回答已采纳
我正在我的angular4项目中实现openseadragon，
如果我像下面这样使用，它不工作并抛出错误**无法读取null的属性'appendChild‘，
<div *ngIf="(pictures$ | async).length" >
<div id="seadragon-viewer" style="height: 333px;color: #333;background-color: black;">
</div>
</div>
但是如果我在if条件中直接使用
浏览 0提问于2017-07-21得票数 0
当我在角7中使用form.resetForm()时，为什么会出现"form.resetForm不是一个函数“的错误。
in .component.ts
form: FormGroup;
constructor(
private userService: UserService,
private fb: FormBuilder,
) { }
ngOnInit() {
this.createForm();
}
createForm(): void {
this.form = this.fb.group({
firstName: [
浏览 0提问于2019-05-10得票数 1
回答已采纳
2回答
我在Angular *NgIf的语义UI下拉列表中遇到了一个问题。当我将语义下拉列表放入任何NgIf条件中时。语义不起作用。当我删除那个Ngif时，它工作得很好。任何针对此的解决方案。
WIth *NgIf，现在语义下拉将不起作用。它将显示正常的下拉列表。
<div *ngIf= "IsVisible">
<select class="ui selection dropdown"
<option value="" selected="selected">Bedroom</option>
浏览 1提问于2019-11-19得票数 2
1回答
我在bootstrap表单中有一个输入字段，它在用户更改model时进行验证。我有一个反馈help-block与输入字段，这是要验证。但是，提供的模式验证不起作用。这是我的代码：
<div class="form-group" show-errors='{showSuccess: true}'>
<label>ID</label>
<input class="form-control" type
浏览 5提问于2015-10-23得票数 1
回答已采纳
和标题一样，我想显示一个按钮。单击按钮后，确认消息将显示该按钮过去所在的位置。如果我单击“是”，它将继续进行。如果我单击“否”，它将返回按钮。
这是我的.html代码：
<button type="button" class="btn btn-primary" (click)="check(true)">Click</button>
<div *ngIf="isValid">
<small>Are you sure?</small><a href="#&#
浏览 6提问于2018-04-18得票数 0
回答已采纳
1回答
是否有一种动态更改可用字段的方法？
我试过：
更新my fields QueryBuilderConfig**.** 的属性的
什么都没发生。
使用ngIf 和 ChangeDetectorRef**.** 移除和重新添加组件。
字段是更新的。
但是，现在某些字段会中断查询生成器。当选择这些字段中的任何一个时，“添加规则”和“添加规则集”按钮似乎什么也不做。在添加内容出现之前，您必须删除问题字段。
视频：
浏览 1提问于2019-04-01得票数 0
回答已采纳
我需要执行隐藏和显示按钮的列表视图项目的编程基础上的条件。
下面我已经试过了*ngif条件。它删除了DOM entirely.So，它完全显示了secondVisible布局按钮。
html文件：
// inside listview ng-template :
<Button *ngIf="firstVisible" row="0" col="2" text="First"> </Button>
<StackLayout *ngIf="secondVisible" row=&
浏览 10提问于2017-08-18得票数 0
2回答
我已经在angular 7中实现了UI。我有一个checkbox控件，在它下面显示和隐藏一个textarea控件。我的问题是，每当控件显示在其左侧的控件是push down.Could时，有人告诉我问题可能是什么吗？因此，当选择sideletter协议时，将显示侧写详细信息，但它会将NAV报告周期向下推到左侧 在此之前 ? 之后 ? html代码 <style>
label {
margin-left: 0.5rem;
vertical-align: middle
}
.panel-heading {
浏览 28提问于2019-06-03得票数 1
我需要在Angular 8 web应用程序的一个页面中呈现一个表单，该表单包含一个带有10k+行数据(每行15+ FormControls )的FormArray。由于这些大量的数据，有一个很大的渲染问题，有谁可以帮助我提高渲染性能吗？谢谢
我曾尝试在@angular/cdk中使用virtualScroll，但效果仍然不佳
<table [formGroup]="validateForm">
<thead>
<tr>
<th *ngFor="let column of columns"
浏览 8提问于2019-07-17得票数 1
1回答
在Angular 6上，我的模板上有一个WIJMO网格。此网格从数据库表中提取。网格的每一行都应该有一个delete按钮或一个un-delete按钮，这取决于*ngIf else
<wj-flex-grid>
<wj-flex-grid-column [header]="'ID'" [binding]="'ID'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'deleted&#
浏览 3提问于2018-11-28得票数 0
回答已采纳
我在用角度打开pag时遇到的错误是：
core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'getDocumentContent')
我在角度分量上观察到了这个：
selectedDocument$ = this.store.selectedDocument$.pipe(startWith(new Log()));
在我看来：
<div
*ngIf="{
selectedDocument: selectedDocument$ | async
浏览 1提问于2022-08-21得票数 -3
我需要为数组的一个值启用文本区域，方法是单击该值的按钮
我尽了最大努力使它得到解决，但我的解决办法如下
为数组中的每个值启用文本区域。
下面描述了我遵循的步骤
步骤1: app.component.html
我在html文件中显示数组。
<tbody *ngFor="let items of sectionDetails">
<tr *ngIf="items.sectionName == item">
<td>
{{items.question}}
</t
浏览 3提问于2020-01-29得票数 1
回答已采纳
4回答
方法在角材料自动完成中被多次调用
、、、、
我们使用角材料‘s autocomplete创建了一个组件。为了显示这些选项，我们正在遍历一个由51个对象组成的数组。我正在将一个CSS类应用到已经选择的选项上。该方法决定该选项是否被选中。该方法被命名为 51 *28 = 1428倍。我似乎不明白原因?它只应该被命名为51乘以<code>E 211</code>，不是吗？
<mat-form-field class="full-width">
<input type="text" matInput #autoCompleteInput [formControl]=&
浏览 0提问于2019-09-09得票数 5
回答已采纳
1回答
我有两个组件(1-app-student-list 2-app-student-detail).
我想在student-detail中使用student-list，如下所示：
app-student-detail.html
<p>Student Detail Component is here ....</p>
app-student-detail.ts
export class StudentDetailComponent {
showDetail() {
alert("We are in student-detail...");
}
浏览 0提问于2019-12-01得票数 0
回答已采纳
1回答
在带提前(AOT)编译的Angular 2中，我有一个父组件和一个子组件，如下所示：
<div>
<h1>I am a parent</h1>
<myChild *ngIf="showChild"></myChild>
</div>
我知道子模板是动态插入到DOM中的。
如果showChild的计算结果为false，Angular到底什么时候销毁该子组件？或者Angular会完全销毁子组件吗？是时间角度调用了onDestroy()方法吗？
浏览 1提问于2017-04-06得票数 32
回答已采纳
情况是这样的:我有一个从ngFor循环生成的对象列表。我正在尝试单击单个元素，并更改该特定元素的标记内容。当用户点击该元素时，我希望曲目编号显示“正在播放”。按照我编写的方法，它会将更改应用于循环中的每个元素。
HTML：
<li class="song-block"
*ngFor='let song of songsToDisplay'
(click)="getSong(song)">
<div (click)="play()" class="song-card"
浏览 11提问于2018-03-03得票数 3
回答已采纳
1回答
我在一个角度应用程序上使用选项卡，在用户需要的时候，我使用ngIf延迟加载指令和控件。问题是，如果用户浏览该选项卡，我不希望重新创建该选项卡，考虑到这一点，我将使用这个技巧来初始化选项卡一次，并在用户需要时显示它：
<button ng-click="tab.show=!tab.show">Toggle tab</div>
<div ng-if="tab.show || tab.initialized" ng-show="tab.show" ng-init="tab.initialized=true"
浏览 4提问于2014-11-03得票数 3
回答已采纳
我有一个formgroup实例，当"model.id > 0“时需要显示带有formControlName属性的输入，否则显示没有该属性的输入。
但是当我这样做时，我得到一个错误："formGroup需要一个FormGroup实例。请传入一个。“
我该如何解决这个问题？
<form [formGroup]="form">
<div class="margin_bottom__25">
<div class="form-group row">
<label for="
浏览 0提问于2018-04-25得票数 0
我有一个文本输入，它是一个带有按钮的挠性容器。如果该框是可见的，则用户可以单击箭头折叠/隐藏该框，如果隐藏的单击将显示该框。在init上，我还附加了一个@ViewChild，以便能够访问输入。
我的问题是，当我初始拥有showTextInput=true并显示输入时，这是很好的。当我稍后单击“隐藏”时，该框将被正确删除，另一次单击将再次显示它。但似乎在我把盒子藏起来并再次显示出来之后，它似乎不再有听众的连接。我试着在设置initAutoComplete()时调用showTextInput=true，但是它会发出抱怨。
错误TypeError:无法读取未定义的属性“nativeElement”
浏览 4提问于2021-03-25得票数 0
回答已采纳
我试图使用引导4的扩展-折叠特性，并且在使用*ngIf进行扩展和折叠时遇到了一个奇怪的问题。每当我尝试按下面的方式使用*ngIf时，jquery就不起作用了，但是当*ngIf被删除时就能工作了。
HTML:
<div class="collapse-group">
<div class="row">
<div class="col-md-7" id="row">
<div id="link_text_div" *ngIf=&#
浏览 0提问于2018-08-01得票数 0
我有一个材料滑动切换按钮，它使用(ngModel)与一个值为" true“或"false”的字符串变量进行双向绑定，当我切换它时，该按钮正确地更新了变量的值，但当它第一次加载到DOM中时，它总是将其状态显示为true，即使变量中的值是"false“。
<div *ngIf="agent.attributes[i].type == 'Boolean'">
<mat-slide-toggle [checked]="agent.attributes[i].value == 'true' ? true
浏览 2提问于2018-12-17得票数 5
回答已采纳
1回答
ngFor列表不打印空值
、、、
我收到的数据(卡)，我进一步填充为一个列表：
[{"id":20,"responsibilities":[{"id":39,"attribute":"Name","action":"","card":20},{"id":40,"attribute":"ISBN","action":"","card":20},{"id":41,"attribute&#
浏览 0提问于2018-05-09得票数 0
回答已采纳
2回答
我有一个ngIf条件来检查响应数据。当没有数据时，我得到一个空响应。如果为空，我想显示"No data Found“。我试过ngIf="!addresses"，但它不工作，我该如何处理呢？模板：
<div class="col-md-9 col-sm-9 col-xs-9 *ngIf="(!addresses )">
<div class="col-md-9 col-sm-9 col-xs-9">
No Data Found
浏览 0提问于2017-07-25得票数 0
1回答
我在父组件中有一个子组件。我的问题是:子组件什么时候会显示在代码中？在父级中的函数完成之前或赋值变量的语句之后。请参考下面的代码：
parent.component.html
<child-component *ngIf="show"> </child-component>
parent.component.ts
function(){
this.show = true;
this.anotherVariable = 5;
}
在上面的代码中，什么时候显示子组件？只要语句this.show = true;运行，或者在函数结束之后(即在this.a
浏览 0提问于2019-05-26得票数 1
我使用mat-autocomplete，因为当我选择下拉列表并滚动主栏时，dropbox不会随自动完成输入栏一起移动。
代码：
<td width = 24% *ngIf="!stock.value.status_item">
<input style="width: 167px;" type="text" placeholder="Select Item" #editInput tabindex="1" class="form-control"
ma
浏览 2提问于2020-07-17得票数 0
3回答
在角4中，我使用*ngFor来显示一些图像
<div *ngFor='let image of images;let i = index'>
<img [src]="'/assets/Images/'+image+'.png'" *ngIf="!tohide(i,0);">
</div>
在第一次完成*ngFor之后，我希望通过*ngIf删除特定的图像，而不更改数组“图像”。问题是每当我用函数“tohide”删除一个图像，*ngFor再次绑定到“图像”并更新图像集。
浏览 5提问于2018-01-09得票数 2
在使用*ngIf时，我对输入和输出错误消息有问题。淡入效果很好，但是淡出不起作用。相反，即使*ngIf在淡出完成之前不会生效，文本也会消失(好像设置为display:none)。我尝试过使用字符串枚举和数值进行转换，但得到了相同的效果。我的动画配置有问题吗？
链接堆栈闪电战是使用角10，我在角11.0.7 (最新)。
@Component({
selector: "app-form-error",
animations: [
trigger("fadeInOut", [
state("false", style({
浏览 4提问于2021-01-09得票数 2
回答已采纳
我有一个这样的材料表行：
<ng-container matColumnDef="delete">
<mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>
<mat-cell *matCellDef="let data">
<mat-spinner *ngIf="isDeleting" [diameter]="25" ></mat-spinner>
<button
浏览 19提问于2019-11-22得票数 0
我有一个条件。我想要在其上显示该标签。在angular中，ngIf就在那里。但是，在纯HTML中有什么属性吗？ 我试过了 隐藏 hidden="false“ hidden="true“ 但是，什么都不起作用。
浏览 31提问于2019-10-09得票数 0
回答已采纳
有时，如果我单击一个调用操作方法的commandButton，它只会执行页面刷新，而不会实际调用该方法！
我在该方法中设置了一个断点，如果发生此行为，则不会调用该方法。奇怪的是:如果我没有在具有"required=true“的输入组件中填充值，它也会这样做。我预计会出现一个验证错误。只有当操作方法被称为精细时，才会出现错误。但如果它只会发出奇怪的页面刷新，就不会了。
这个调用看起来很正常，在大多数情况下都有效：
<h:commandButton value="Do something"
action="#{bea
浏览 1提问于2011-05-20得票数 1
对于下面的代码，我使用了隐藏，当我在这两个路由之间路由时，它调用ngOnInit()。然而，当我使用"*ngif“时，ngOnInit()从未被调用过。我想知道为什么会发生这种事。此外，我想要"*ngif“，如果它是可能的，因为”隐藏“可能会与CSS冲突。
<div class="container">
<div [hidden]="!(router.url == '/info/userinfo')">
<div class="
浏览 3提问于2017-03-16得票数 1
我有以下Angular 2组件，我需要id为bannernote的textarea在它可见时立即聚焦(isEditEnabled) <div class="cont-notesbanner">
<p class="triangle"></p>
<h3 class="tit-notesbanner">Add notes:</h3>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
&l
浏览 20提问于2019-02-06得票数 1
回答已采纳
2回答
我正在使用ionic 4，但我在使用ngIf指令时遇到了问题。问题是ngIf指令语句被多次执行。请注意*ngIf="isLoggedIn()"。
我在tab3.page.html里有这个
<ion-header>
<ion-toolbar>
<ion-title>
Tab Three
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<div *
浏览 2提问于2020-01-07得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
