* Angular中的ngIf指令
Angular中的ngIf指令是一个结构型指令，用于根据条件在DOM中添加或删除元素。它的作用是根据给定的布尔表达式的结果决定是否渲染或移除某个HTML元素。如果条件为真，则元素被渲染并显示在DOM中，否则元素将从DOM中移除。
ngIf指令的主要用途是在Angular应用中根据条件显示或隐藏某个组件、元素或模板。它常用于动态控制用户界面的显示，根据特定的条件来展示或隐藏不同的部分。比如，根据用户的登录状态来显示不同的导航菜单，或者根据权限来显示不同的功能模块。
在使用ngIf指令时，可以使用常见的JavaScript表达式、函数调用、变量等来设置条件。如果条件是一个变量，当变量的值发生变化时，ngIf指令会自动更新DOM。
以下是一个使用ngIf指令的示例：
<div *ngIf="isLoggedIn">
<p>Welcome, {{ username }}!</p>
<button (click)="logout()">Logout</button>
</div>在上面的示例中，如果isLoggedIn变量的值为true，则渲染包裹在<div>中的内容，显示欢迎消息和登出按钮。如果isLoggedIn变量的值为false，则移除这部分DOM，不显示相关内容。
推荐的腾讯云相关产品：无
相关文档链接：Angular ngIf官方文档
相关·内容
当使用像*ngIf template这样的结构指令时，它看起来像angular在源代码中插入诊断注释。
1)为什么有用，以后如何使用？
2)这是angular 2在*ngIf中动态添加模板的方式吗？
在使用时
<ng-template [ngIf]="hero">
<div>{{hero.name}}</div>
</ng-template>
Angular在html中插入以下注释。
浏览 0提问于2017-11-23得票数 1
我有用户名单。我希望当光标在按钮上悬停时，它将*ngIf设置为true，然后显示有关用户的信息(当光标离开按钮时显示为false )。
user-list.html**:**
<div *ngFor="let user of users">
<h1>{{user.name}}</h1>
<div onUserHover *ngIf="ngIf">
<p>{{user.description}}</p>
</div>
</div>
user-list
浏览 4提问于2017-03-31得票数 1
1回答
我试图在我的AngularDart项目中实现firebase登录，但是在实现角飞镖时会抛出一个错误。我已重新检查了*ngIf错误，但无法找到所需的所需。
请帮我这个忙谢谢。
Error running TemplateGenerator for
my_app|lib/views/layout_component/layout_component.dart.
Error: Template parse errors:
line 32, column 35 of LayoutComponent: ParseErrorLevel.FATAL: Can't bind to
'ngI
浏览 1提问于2017-09-05得票数 1
回答已采纳
1回答
角6设置指令
、、
似乎我无法使指令在我的应用程序中工作。我没有收到任何错误，当我在堆栈闪电战中复制时，它工作得很好。当我第一次尝试实现这个指令时，我是，但我犹豫不决地说，这实际上是我的应用程序中“自定义指令”本身的一个问题.最后没人回答这个问题。现在我带着更多的信息来找你。
请让我知道。，你看到我的设置有什么问题吗？我错过了什么？，我觉得我什么都试过了。
以下是我尝试过的：
在Stackblitz工作:我知道如何制作。
但是这个非常简单的指令在我的应用程序中不起作用(请在下面找到代码)(澄清:不工作=我没有看到console.log或影子指令应该应用的属性).模板：
指令：
模块：
我尝试过像上面这样在最
浏览 0提问于2018-10-15得票数 2
我正在尝试创建一个类似于ng-if指令的指令，所以我想获取它的功能。我创建了这样一个指令：
(function () {
'use strict';
angular.module('sapphire.directives').directive('ifScreensize', directive);
function directive(ngIfDirective, $window) {
var ngIf = ngIfDirective[0];
return {
浏览 5提问于2017-12-10得票数 3
回答已采纳
1回答
我有一个SharedModule
import { NgModule } from '@angular/core';
import { ControlMessagesComponent } from './control-messages.component';
@NgModule({
imports: [
],
declarations: [
ControlMessagesComponent
],
exports: [
ControlMessagesComponent,
]
})
export class Share
浏览 1提问于2017-09-07得票数 3
回答已采纳
1回答
我希望在我自己的指令中使用NGIF作为一种包装。
我发现下面的例子非常有效.
var NAME = 'yourCustomIf';
angular.module('myApp', [])
.directive(NAME, function (ngIfDirective) {
console.log(ngIfDirective)
var ngIf = ngIfDirective[0];
return {
transclude: ngIf.transclude,
priority: ngIf.priori
浏览 2提问于2016-10-03得票数 0
回答已采纳
在使用Angular 2时，我遇到了一个问题:显然，我不能在同一个DOM元素上放置两个结构指令(ngFor，ngIf)。
在Angular 1中，这曾经是可行的。对于
<div ng-repeat="item in items" ng-if="$even">{{item}}</div>
当我尝试使用做类似的事情时
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div *ngFor=
浏览 2提问于2016-01-30得票数 10
回答已采纳
我有一个div，它有一个*ngIf条件和fxFlex.lg="30" fxFlex.xl="50"响应的布局值：
<div class="project-test__element" *ngIf="myCondition()" fxFlex.lg="30" fxFlex.xl="50" fxLayoutAlign="end center">
Test fxFlex.lg and fxFlex.xl
</div>
下面的样式将应用于我的div
place
浏览 2提问于2020-11-26得票数 0
回答已采纳
在角2分量中，我有authbox.component.ts
import {Component} from 'angular2/core';
import {COMMON_DIRECTIVES} from 'angular2/common';
import {Credentials} from './credentials'
@Component({
selector: 'authbox',
template: `<div>
<div class="login-panel&#
浏览 0提问于2016-03-11得票数 52
回答已采纳
2回答
我有一个自定义组件，它将引导窗体组应用于我的窗体字段。在我的组件中，我有以下属性：
import { Component, Input, ContentChild } from '@angular/core';
import { NgControl } from '@angular/common';
@Component({
selector: 'form-field',
template: `
<div class="form-group" [ngClass]="{'
浏览 2提问于2016-06-10得票数 1
回答已采纳
我的问题涉及*ngif指令，一旦*ngif=true，我希望在'ModClass‘指令能够完成它的操作之前，首先呈现html内容。
我试图实现ngOnInit和ngViewInit，但没有成功，因为我相信在呈现ngif内容时ngOnInit会触发，或者在生成父组件时更早。
另外，对于ngViewInit，我想我需要订阅一些东西，但是我不知道我需要订阅什么。(我可能完全错了，这会做更多的研究)
下面的代码说明了我的问题，以及一个stacksblitz链接，这样您就不必在计算机上重新创建此代码来排除故障。
代码应该做的是按一下按钮，点击它，切换与*ngIf='trigger'
浏览 0提问于2018-10-16得票数 3
回答已采纳
我正在用Angular (Angular2 RC4)创建一个简单的应用程序，我发现很难在nodejs的实时服务器上运行这个应用程序。
我想帮助我可以做些什么来解决出现在Chrome控制台上的错误。
控制台Chrome中的错误：
browser_adapter.ts:82
EXCEPTION: Template parse errors:
Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and
浏览 2提问于2016-07-23得票数 18
你好，我需要使用angular2 *ngIf语句来切换类
<i *ngIf="visible" [(ngClass)]="{{arrow}}"></i> <<这行代码不能正常工作
这是我的ts代码
private visible = true;
private i = 0;
private arrow = 'ic-v';
private showList(){
if(this.i == 0){
this.i = 1;
this.visible = false;
浏览 4提问于2017-01-26得票数 4
回答已采纳
我正在使用Cory Rylan技术的一个版本在我的表单上显示验证错误消息。这在RC4中运行得很好，但是，我不知道如何使用RC5来完成这个任务。
这是我缩小的SharedModule：
import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { CommonModule } from
浏览 3提问于2016-09-06得票数 5
回答已采纳
以下是一个自定义组件：
<app-variable-component-1></app-variable-component-1>
因此，我的想法是，当用户更改输入时，即单击或选择选项，则当前选择的值将存储在父组件内的属性中。
如下所示：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent-component',
templateUrl: './parent-component.component.ht
浏览 0提问于2020-09-26得票数 0
<div *ngIf="((one===one)&& (two===two)) || (one===two)"></div>
Angular如何计算这个相当复杂的表达式？
它肯定没有使用eval，那么它如何解析和评估它呢？
有人能给我指个方向吗？
我正在查看ngIf的源代码，但似乎没有发现任何有趣的东西。
似乎在ngIf收到这个值的时候，它已经被angular评估过了。
浏览 3提问于2017-08-30得票数 2
当满足某些*ngIf条件时，如何从类装饰器调用某个方法。我有一个与问题完全类似的场景，其中使用ng-init()，但ng-init不是Angular2的一部分。
<div *ngIf="obj.someProperty" callSomeMethod() >
<!--render inner parts-->
</div>
浏览 8提问于2016-04-18得票数 6
回答已采纳
在哪里可以找到完整的Angular结构指令列表？我知道这些：
*ngFor
*ngIf
*ngSwitchCase
*ngSwitchDefault
*ngSwitch
*ngTemplateOutput
还有其他的吗？我想一定有一个完整的列表，但到目前为止，我还没有找到它。
浏览 5提问于2020-08-05得票数 0
我正在创建一个DOM结构，只想在第一时间在一些可视化组件中添加一些部分，不想让它们一次又一次地刷新，这就是*ngIf的工作方式。这是为了避免绑定一次又一次地执行，因为我知道一旦创建就永远不会改变。换句话说，Angular1有::操作符来帮助实现这一点。
Angular2中是否有针对*ngIf的一次性绑定？如果这是在其他问题中讨论的，请给我指出问题。
浏览 0提问于2017-03-27得票数 9
我试图根据aType.Name在ngFor循环中的值呈现6个自定义组件中的一个。以下是我的开关语法：
<div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
<span [ngSwitch]="aType.Name&
浏览 1提问于2016-06-21得票数 2
回答已采纳
1回答
我正在开发一个更大的应用程序，我们正在使用延迟加载模块。加载模块之后，在某些情况下，组件会被呈现到<ng-container><ng-container>中。问题是，在容器上定义的动画没有被调用。
我创建了一个虚拟的stackblitz示例来演示我的意思：
app.component.html:
<ng-container *ngIf="visible" [@myAnimation]>
<hello [ngStyle]="{'top': '50px'}" name="not
浏览 1提问于2019-09-12得票数 3
2回答
与子组件共享API数据
、、、
我正在使用angular 2 RC1中的服务从api中提取数据。它被拉到我的主组件中，但我也想与作为主模板的子组件的其他组件共享此数据。我已经尝试过输入，但我认为我没有正确地使用它们，所以希望有人能在这里给我指引正确的方向。目前，我正在调用主组件和子组件中的api
-主要组件
import {Component} from '@angular/core';
import {ProjectsMainApi} from "../../../services/projects-main";
imp
浏览 2提问于2016-05-29得票数 0
目前，我正在开发基于用户角色的angular application.More，超过6个组件被加载到仪表板中。我使用col来拆分dashboard.The中的组件大小。问题是基于role.If的一些组件对用户隐藏。组件的空间仍然保持不变，它没有对齐。我想用当前可用的下一个组件替换这些空间。
dashboard.html：
<div class="row">
<div class="col-lg-4">
<app-date-update *ngIf="isAdminLogin"></app-da
浏览 2提问于2018-11-24得票数 0
1回答
我有一个简单的基于Angular2的web应用程序，与身份验证。我遇到了一个问题，根据用户是否登录，导航栏看起来不同，而且当用户没有登录时，一些组件也不会显示。
例如，当用户单击logout时，导航栏会发生变化，但另一个组件直到页面刷新后才会消失。当按下LogOut按钮时，如何触发元件刷新？
//user.service.ts
logout() {
localStorage.removeItem('id_token');
this.loggedIn = false;
}
//nav.component.ts
import { Component, In
浏览 45提问于2016-03-29得票数 5
我们使用带有Angular2的metisMenu，我们在其中一个列表项上有一个*ngIf，该值会根据记录是否被选中而改变。如果是，则显示li以提供其他选项。
问题是，当它可见时，它不工作，单击该菜单项重新加载页面，如果它始终可见，则它工作正常。我假设问题是ngIf从DOM中完全删除了它，而不仅仅是可见性，所以当我们初始化metisMenu时，它不在那里。我尝试重新初始化metisMenu，但似乎不起作用。
有没有办法在li项上使用metisMenu和*ngIf？
浏览 1提问于2017-08-22得票数 1
当在一个非常简单的组件中使用*ngIf时，我在标题中得到错误。例如，下面的代码和app.module会导致这种情况： app.component.html： <ng-container *ngIf="true">
<div>True</div>
</ng-container> app.module.ts： import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser&
浏览 29提问于2021-04-05得票数 1
回答已采纳
实现‘angular-scroll spy’时出错！ div:无法绑定到“spiedTags”，因为它不是“div”的已知属性。这是.html文件 <div *ngIf="candidate_output; else contentLoading;" id="parentDiv" scrollSpy [spiedTags]="['DIV']" (sectionChange)="onSectionChange($event)">
浏览 20提问于2020-08-30得票数 0
回答已采纳
角2提供了许多内置组件.比如NgIf，NgFor，NgStyle，NgNonBindable.有些组件与“*”一起使用，例如*ngIf和*ngFor：
<div *ngFor="item of items">
{{item}}
</div>
其中一些与“[]”一起使用，例如ngStyle和ngClass：(组件输入？)
<div [ngStyle]="{'background-color': 'yellow'}">Content</div>
其中一些被用作“角-1”：例如：
&
浏览 1提问于2016-03-16得票数 0
回答已采纳
我正在使用Angular 7，但在我的HTML中编写以下代码时没有得到响应。
<ng-template *ngIf="isStatus">
... line of code...
</ng-template>
请在这方面帮助我，我不明白我在这里做错了什么。
浏览 27提问于2019-11-20得票数 0
回答已采纳
1回答
如何在angular 2中实现特定目标的事件委托
考虑使用下面的html
<ul>
<li><span>hello</span><button>button</button></li>
</ul>
我还想实现事件委托，即使用户单击了li中的span或按钮，li事件也会运行。
例如，我们可以在jquery中使用以下命令来实现此目的：
$('ul').on('click', 'li', function() {
console.log($(thi
浏览 0提问于2017-12-21得票数 1
我已经参考了这个似乎最近的网站：，但它没有帮助。我尝试修改@NgModule.imports。
这是Chrome中的调试器所说的：
Unhandled Promise rejection: Template parse errors:
'item' is not a known element:
1. If 'item' is an Angular component, then verify that it is part of this module.
2. If 'item' is a Web Component then add "
浏览 11提问于2017-02-07得票数 0
回答已采纳
1回答
尝试使用下面的代码创建菜单
<aside id="left-panel">
<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i>
</span>
<nav>
<ul>
<li *ngFor="#menu of menus" [class.open]="menu === selectedMenu"
(click)=
浏览 2提问于2016-02-21得票数 5
回答已采纳
我使用的是AngularJS 1.1.5和JQuery 2.0.3。我收到以下错误：
Error: Multiple directives [ngIf, ngIf] asking for transclusion on :
<!-- ngIf: !isFocused -->
我有以下片段：
main.js：
var app = angular.module('test',['ngGrid']);
app.controller('TestCtrl',function($scope,$http){
$http.ge
浏览 2提问于2013-09-27得票数 1
回答已采纳
我不知道出了什么问题。* NgIf，* ngFor将导致如下所示的错误消息。组件、模块、服务附加源内容。我需要你的建议。
错误消息
Can't bind to 'ngIf' since it isn't a known property of 'img'. ("oducts | productFilter:listFilter'>
<td>
<img [ERROR ->]*ngIf='sho
浏览 0提问于2017-04-12得票数 0
回答已采纳
我定义了一些在我的Angular组件中使用的ng-template： <ng-template #myTemplate>
... contents ...
</ng-template> 不使用*ngIf如何显示此模板
浏览 8提问于2021-03-25得票数 0
我使用RC5 ngModule
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { IndexComponent } from './index.component';
import {RouterModule} from
浏览 0提问于2016-09-01得票数 0
我使用的是angular11，登录的用户有数组“卖方”、“买方”、“制造商”、“营销者”、"content_provider“的数据。
其中登录用户可能有“卖方”或“制造商”、“营销者”.作为元数据登录。
我正在用*ngIf="this.uiAccess === "seller"和*ngIf="this.uiAccess !== "buyer"展示我的UI。而this.uiAccess存储在网站cookie中。
如何实现它支持用户接口可能有一个以上的uiAccess数组值，并显示？
目前，这只对this.uiAccess只有一个值，并显示
浏览 3提问于2021-06-05得票数 0
回答已采纳
2回答
我创建了一个自定义指令，并将其添加到我的app.module的声明中。但是，当我在组件中使用它时，它会给我一个错误：
属性绑定hasClaim不被嵌入模板上的任何指令使用。确保属性名拼写正确，所有指令都列在"@NgModule.declarations".ng中。
我是这样创建指令的：
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
import { SecurityService } from './security.service
浏览 1提问于2020-09-08得票数 1
我正在使用vanilla AngularJS v1.4.5 (没有jQuery)，并希望我的自定义指令在编译时将一个属性添加到它的祖父母元素中。
在编译函数中，我可以使用parent()方法element两次获得祖父母元素，并使用attr()方法添加我的属性。但是，如果父元素具有指令，则祖父元素不会获得该属性。
angular.module('myApp', [])
.directive('foo', fooDirective)
;
function fooDirective() {
return {
compile : com
浏览 8提问于2015-09-16得票数 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
回答已采纳
这个柱塞来自Angular ngOptions示例：
但是，我向第一个select添加了一个ngIf，结果是：
<div ng-if="1<2">
Color (null not allowed):
<select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
</div>
有趣的是，您可能会注意到，当您更改选择时，ngIf会破坏ngModel绑定，而不会
浏览 1提问于2014-10-28得票数 0
1回答
我正在开发一个Angular 4应用程序，并希望仅当totalYears <= 7时才显示列。我在th元素中有一个ngFor和一个ngIf。我目前收到一个错误。我该怎么处理呢？
<table class="table">
<thead>
<tr>
<th></th>
<!-- <ng-container *ngIf="yearList.length > 6"> -->
<th *ngIf="totalYe
浏览 7提问于2018-02-05得票数 0
回答已采纳
1回答
我想做一个全屏指令，但在我的情况下有些东西不起作用。我需要访问从指令到模板的isFullScreen变量，因为"*ngIf“但是我不知道我做错了什么。
这是我的指示：
指令
import { DOCUMENT } from '@angular/common';
import { Directive, HostListener, Inject, Input } from '@angular/core';
@Directive({
selector: '[appFullScreen]'
})
export class FullScree
浏览 9提问于2022-06-17得票数 2
我需要在一个手风琴中动态地呈现一个扩展面板列表。
标记非常简单：
<mat-accordion *ngIf="currentVenue">
<mat-expansion-panel *ngFor="let gig of currentVenue.gigs" expanded="false">
<mat-expansion-panel-header>
<mat-panel-title>
{{gig.name}}
</mat-panel-titl
浏览 1提问于2018-10-16得票数 2
回答已采纳
4回答
目前我正在使用IF，但例如在Vue.JS中有。在Angular中是不是有类似的东西？
<app-tabs-choice *ngIf="action.type == 'choice'"></app-tabs-choice>
<app-tabs-comment *ngIf="action.type == 'comment'"></app-tabs-comment>
<app-tabs-message *ngIf="action.type == 'message
浏览 0提问于2019-12-11得票数 0
我正在使用Angular2 RC5材料库学习Angular2，并使用VisualStudio 2015.让它在AspNetCore 1.0应用程序中运行，我使用了一个运行完美的Angular2 RC5单页应用程序，并尝试引入延迟加载，其中只有登录页面才会首先加载。当我成功登录时，我希望加载其余的页面。
当我在SPA模式下单击登录按钮时，我会成功地重定向到使用登录页预加载的DashboardComponent页面--这是在我引入延迟加载之前。在遵循之后，我现在得到以下错误
错误片段
例外:错误:未知(在承诺中)：模板解析错误:不能绑定到'ngIf‘，因为它不是一个已知的属性’md ti
浏览 3提问于2016-10-17得票数 4
我在使用Angular的一次性绑定时遇到了问题。
假设我想使用具有一次性绑定的ngIf，如下所示：
<div ng-if="::showImage">
<img src="somesource" img-preloader/>
</div>
在本例中，angular为if内部的表达式创建了一个监视。一旦它被解析为一个未定义的值，该监视就会被移除。
如果仅将其解析为真值，则将后代html树添加到DOM并随后呈现。
现在这一切都很棒，但我真的想避免最初的监视，只要解析表达式，如果它是未定义的-只有这样才设置监视。原因是在我
浏览 1提问于2017-10-26得票数 3
如何在不使用表单生成器的情况下使用angular2 验证具有最大长度或最小长度的angular2用户名字段。
我试过以下几种方法，但没有工作
<ion-item>
<ion-icon name="person" item-left class="placeholder-icon"></ion-icon>
<ion-label floating primary>Username</ion-label>
<ion-input [(ngModel)]=&#
浏览 2提问于2016-05-04得票数 1
回答已采纳
2回答
我正在尝试在我的angular 4+中的html中分配一个变量。这个是可能的吗？
我试图实现的是将一个比较赋值给一个变量，这样我就不必在所有情况下都保持相同。
下面是我想要实现的一个示例：
<mat-list-item role="list" *ngFor="let o of examles;" role="listitem">
<span *ngIf="o.type == 'EXAMPLE_TYPE'"> some text</span>
// here more
浏览 16提问于2018-01-31得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
