显示或不显示<p>的ngIf
ngIf是Angular框架中的一个指令，用于根据条件来显示或隐藏HTML元素。它的作用是根据表达式的值来决定是否在DOM中渲染该元素。
ngIf的语法如下：
<element *ngIf="expression">
<!-- content to show when expression is true -->
</element>其中，expression是一个返回布尔值的表达式。当expression为true时，该元素会被渲染并显示在页面上；当expression为false时，该元素会被从DOM中移除，不显示在页面上。
ngIf的优势：
- 提高页面性能：ngIf可以根据条件动态地添加或移除DOM元素，减少不必要的渲染和页面重绘，提高页面加载和渲染性能。
- 简化逻辑：ngIf可以根据条件来控制元素的显示与隐藏，使页面逻辑更加清晰和简洁。
- 提高用户体验：ngIf可以根据不同的条件展示不同的内容，从而提供更好的用户体验。
ngIf的应用场景：
- 根据用户权限来显示或隐藏某些功能或操作按钮。
- 根据用户登录状态来显示不同的页面内容。
- 根据数据加载状态来显示加载动画或错误提示信息。
- 根据用户输入的搜索条件来动态显示搜索结果。
腾讯云相关产品推荐：
腾讯云提供了丰富的云计算产品和服务，以下是一些与ngIf相关的产品和服务：
- 云服务器（CVM）：提供弹性计算能力，可根据业务需求动态调整计算资源。 产品介绍链接：https://cloud.tencent.com/product/cvm
- 云函数（SCF）：无服务器计算服务，可根据事件触发动态执行代码逻辑。 产品介绍链接：https://cloud.tencent.com/product/scf
- 云数据库MySQL版（CDB）：提供稳定可靠的云数据库服务，支持高可用、备份恢复等功能。 产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
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
回答已采纳
我试着用角度11显示在线状态，就像这个一样。
我的ts.file
import { ConnectionService } from 'ng-connection-service';
isConnected = true;
noInternetConnection: boolean;
constructor(private connectionService: ConnectionService,) {
this.connectionService.monitor().subscribe(isConnected => {
th
浏览 6提问于2021-07-28得票数 0
我正在尝试在我的一个模块中实现。我想要显示“显示更多”按钮，以便仅当有更多数据要显示时才加载数据，例如，如果我的数组的计数大于5或更多。
我尝试过创建变量并使用ngIf，但是按钮操作停止了。这是我的代码片段-
<p-dataScroller [value]="filteredComments" [rows]="5" [loader]="loadButton">
<p-header>
..removed code for better clarity
浏览 0提问于2018-11-01得票数 0
2回答
假设我有一个父和子组件。
<button (click)="downloadReport()">Download Report</button>
<app-child-component [reportMode]="reportMode" (onReportModeReady)="onReportModeReady">
</app-child-component>
在子组件上，我需要隐藏/显示一些PrimeNg组件
<p-datatable #dtNormal ngIf="!repo
浏览 0提问于2019-03-13得票数 0
回答已采纳
我有一个使用AngularJS的超文本标记语言文件，如下所示：
<div *ngIf="Item">
<!-- Create a 'display' for each category. -->
<div *ngIf='Item.category === "book"'>
<p>Book Title: {{Item.booktitle}}</p>
</div>
<div *ngIf='Item.
浏览 0提问于2021-04-12得票数 0
在我的json中检查库存金额时，有问题显示正确的in-stock (store) or (online)消息。
所以情况是，如果股票小于10，它被认为是low-stock，如果它大于10，那么就是in-stock，如果它是0，那么就是out-of-stock。
但是，如果股票大于10，那也没问题。
如何正确检查股票以显示正确的股票信息？
示例json --
this.checkStock = {
"online": 0,
"store": 10
}
带有ngIf检查的模板--
<p>
<span *ngIf="check
浏览 0提问于2017-04-20得票数 1
3回答
我已经创建了一个mat对话框组件来激发http响应。当我为mat对话框在html中包含一个ngIf语句时，它不会被处理。在控制台上，它显示如下警告。
不能绑定到“ngIf”，因为它不是“div”的已知属性。
NgIf在项目中的所有其他组件中都工作得很好。
在打字记录文件中调用mat-对话框。
this.matDialog.open(PaymentModelComponent, {
width: "630px",
data: { message: response.comment },
auto
浏览 4提问于2020-07-09得票数 1
回答已采纳
2回答
只有在选中以下选项卡内容时，我才试图显示选项卡内容：
<mat-tab label="contacts">
<p-contacts [contacts]="selectedPanel.contacts"
*ngIf="tabGroup.selectedIndex === 1">
</p-contacts>
</mat-tab>
这是工作，但我有ERROR Error: Ex
浏览 2提问于2019-05-24得票数 7
回答已采纳
1回答
对显示布尔元素有异议。如果我试图在html中设置显示隐藏元素，它的工作方式如下：
<p class="post-more-text" (click)="model.isTextVisible = !model.isTextVisible;">{{model.moreOrLessValue}}</p>
如果我在组件中设置了一个函数，元素就不会隐藏
<p *ngIf="isTextVisible">
{{model?.morePostText}}
</p>
<p class="p
浏览 3提问于2017-03-20得票数 2
回答已采纳
我使用的是Angular7，npm 6.4.1，节点10.15.3。 我只是在玩ngIf，这没什么用。我使用两个按钮在显示和隐藏标题之间来回切换。虽然它只是一条ngIf语句，但它与以下代码一起工作得很好： <p>Do you want to see the last header?</p>
<button (click)="yesHeader()">Yes please!</button>
<button (click)="noHeader()">PLEASE G-D NO!&
浏览 22提问于2019-04-18得票数 1
回答已采纳
2回答
空按钮，因为有复选框
、、、
由于ngIf和ngFor不能共存，所以我放置了一个ng容器来进行循环。但既然我这么做了，没有任何逻辑，任何事情都是行不通的。以下是代码：
视图
<ion-list *ngIf="listfavoris else loading">
<ng-container *ngFor="let favoris of listfavoris">
<button ion-item ion-long-press [interval]="500" (onPressing)="showModeCheckList
浏览 3提问于2017-11-28得票数 1
回答已采纳
3回答
我使用以下代码检查数组是否为空，然后显示消息，否则显示列表。但它只显示了list是有效的。“无消息”没有显示。这里怎么了？
<ion-row *ngFor="let item of globalArray">
<div *ngIf="!globalArray?.length > 0">
<p>No messages</p>
</div>
<div *ngIf="globalArray?.length > 0">
浏览 0提问于2018-03-08得票数 8
回答已采纳
我正在从服务器获取json对象，它们是深度嵌套的。
无论如何，当json对象为空(或数组)时，我想显示“用户尚未填写”。
我几乎什么都试过了，但都不管用。我做错了什么？
<div class="common-container" *ngFor="let detail of deepTeaInfo | getValues">
<div id="exp-box" *ngFor="let grade of detail['introduceInfo']['grade'] | getValue
浏览 2提问于2017-05-10得票数 0
2回答
我正在创建带有验证的角6表单。我只想在提交表单后显示错误消息。重要的事实是，在输入过程中，消息不应更改。因此，例如，当用户没有在输入中输入任何内容，然后提交表单时，就应该出现所需的消息。在此之后，当用户键入某些内容时，消息应该始终可见，直到下一个submitt按钮按下。另外，当前一条规则完成时，错误消息不应该更改为另一条。老实说，我不知道是否可以使用反应形式。
app.component.html
<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm
浏览 0提问于2019-02-22得票数 5
回答已采纳
1回答
我正在我的Angular 8应用程序中设计一个关于页面。我正在使用字体棒和bootstrap 4。 字体不是正确的居中(对齐)的bootstrap。这是我的代码，如果有人可以指导的话！ <!--==========================
About Us Section
============================-->
<section id="about">
<div class="container">
<header class="section-header&#
浏览 36提问于2020-04-01得票数 0
回答已采纳
2回答
我想要一个简单的隐藏和显示带有文本的<p></p>标签。
首先，我使用了一个简单的*ngIf指令，如果输入标记是空的，它就会隐藏我的标记。但是我想要的是，如果我清除输入标签并显示是否有什么东西，如果输入是空的，<p>标记就会隐藏起来。
这是我的密码：
<h2>Bonjour Monsieur {{username}}<span (test)="test()" *ngIf="age != null">, vous avez {{age}} ans</span></h2><br
浏览 0提问于2018-05-07得票数 0
回答已采纳
2回答
我有一个原始(角2)对话框与一个下拉。当对话框显示时，我想将焦点设置为下拉列表。问题似乎是我的div是有条件地呈现的。
我的代码：
<p-dialog (onShow)="fe.applyFocus()">
<div *ngIf="selectedItem">
<button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button>
<p-dropdown
浏览 2提问于2017-05-17得票数 2
回答已采纳
3回答
我有3节/分，我想一个接一个地展示。例如，一旦我单击“显示进度”按钮，首先“第一”div应该只显示，在几秒后“第二”div应该显示“第一”1，然后几秒后“第一”和“第二”div应该隐藏，第三应该显示。它第一次工作很好，但是当我再次点击它时，它不起作用了。有什么更好的方法吗。这是代码
app.component.html
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<button (click)=&
浏览 1提问于2021-05-28得票数 0
回答已采纳
嗨，我在理解ngIf时遇到了问题。
目前我有一个json对象
Profile:{
0:{name: 'Jen',
intro:'',
gender:'female',
age:'1992'},
1:{name: 'John',
intro:'Hi',
gender:'male',
age:'1988'}
}
第一个对象的介绍是空字符串，当它有空字符串时，我想显示‘用户还没有写它’。
我试着这样使用ngIf，但当然不起作用。我该怎么办？
<div *ngFor=&
浏览 1提问于2017-04-17得票数 2
我的服务中有两个BehaviorSubject值，如下所示 public showExportCsvModal = new BehaviorSubject<boolean>(false);
public showDownloadModal = new BehaviorSubject<boolean>(false); 我的html代码是这样的， <p *ngIf="stateService.showExportCsvModal | async">
{{'exportModal.severalMinutesToC
浏览 33提问于2021-11-05得票数 0
回答已采纳
我对这一切都很陌生。我简单地希望在检查p-inputSwitch时显示一个段落元素(在再次检查/false之后，它将再次消失)。
这是我的HTML (组件)：
<p-inputSwitch formControlName="bonus"
(onChange)="clickBonusChecked($event)"
onLabel="yes"
offLabel="no">
</p-inputSwit
浏览 4提问于2019-11-13得票数 2
回答已采纳
当我在谷歌注册的时候。我得到弹出的gmail列表，但当我选择任何gmail。我得到一个错误为10。
.ts文件
import { GooglePlus } from '@ionic-native/google-plus/ngx';
loginWithGP(){
this.googlePlus.login({
'webClientId': '#####', //reverse client id
'offline': true
}).then(res
浏览 2提问于2019-08-13得票数 1
回答已采纳
在使用ngIf显示表单之前，我正在尝试检查数据库中的值。我已经获取了这些值，并在我的控制台中console.log时确认了它。但是，当我将它绑定到我的ngIf指令时，它表示"cannot read property of undefined"，尽管它仍然给出了预期的行为。
我的组成部分：
ngOnInit() {
let p = {
user: this.userInfo.reg_no,
key: '06'
}
this.data.postMethod(p).subscribe(
data =&g
浏览 0提问于2019-09-01得票数 2
回答已采纳
我想要显示基于'item‘值的特定html代码。为此，我使用*ngIf指令复制了10 ng容器。第一个9运行正常，但最后一个不想显示，即使表达式为真。 <ng-container *ngIf="item == '1'">
*works*
</ng-container>
//...2,3,4,5,6,7,8,
<ng-container *ngIf="item == '9'">
*works*
</ng-container>
<ng-container
浏览 25提问于2020-08-05得票数 0
3回答
我正在开发一个Angular 4应用程序，在这个应用程序中，我们为用户提供登录信息。登录可能会失败，在返回时，我们将侦听错误：-
.subscribe(error => {
this.error = error;
});
这显示得很好，我们显示如下：-
<div *ngIf="error">
<p class="error-message">{{ error.ExceptionMessage }}</p>
</div>
上面是一个标准的输入字段，用于输入用户名和密
浏览 12提问于2017-07-12得票数 12
回答已采纳
2回答
我使用routerLinkActive作为默认的路由选择，同时我也显示图像。在初始加载时，图像不会出现。通过更改选项卡，图像将正确显示。
下面是我的代码：
应用程序路由文件：
export const routes: Routes = [{
path: 'adminsidebar',
canActivate: [AuthGuardService],
component: SidebarComponent,
children: [
{
path: '',
component: ActivityDashboardComponent
浏览 0提问于2019-07-19得票数 0
1回答
我是一个角度5的新手，我试图添加'x‘在弹出窗口的右上角，在点击'x’时，应该关闭弹出窗口。我怎样才能做到这一点？下面是我的密码。弹出窗口中是否有显示“x”关闭图标的属性。在这里，我试图使用ng引导弹出。
<div>
<a *ngIf="conditionA" [attr.disabled]="isDisabled">
{{ authorName }}
</a>
<a *ngIf="!conditionB" href="#" (cli
浏览 1提问于2018-08-16得票数 1
我有一个自定义选项卡实现，其中我用一些ngIf指令显示选项卡内容，如下所示：
<tab1 *ngIf="condition === 1"></tab1>
<tab2 *ngIf="condition === 2"></tab2>
制表符有它们自己的形式，有些内容应该被初始化一次，而不是更多。对于当前的实现，每次更改条件(然后更改选项卡)时，组件tab1和tab2都会再次初始化。
我们是否有其他的ngIf替代方案(比如旧的ng显示可能)，它不会再次初始化组件，只会淡入UI上的新内容。否则，我必须使用css (显示无)
浏览 0提问于2018-10-09得票数 4
回答已采纳
1回答
我对棱角比较陌生，很难弄清楚如何将字符串传递到模板中。我想要创建一个可重用的模板(或组件)，它将显示一些关于如何执行操作的指令信息。
目前，我正在通过以下操作来实现这一目标：
<div *ngIf="foo; else noFoo">
<!-- Show things -->
</div>
<div *ngIf="bar; else noBar">
<!-- Show things -->
</div>
<ng-template #noFoo>
<div c
浏览 1提问于2019-07-19得票数 5
回答已采纳
component.html：
<div *ngIf="!isWaiting">
<h2>LOGIN</h2>
<p>{{ message | async }}</p>
<div *ngIf="!(isLoggedIn | async)">
<button (click)="login()">{{'StrLogin' | translate}}</button>
</div>
<div *n
浏览 1提问于2019-06-01得票数 4
回答已采纳
我有一个Angular (v4.1.1)应用程序，它在我的表单输入组件的许多地方使用*ngIf来显示/隐藏用于新的、编辑的或只读模式的元素。当我测试时，我发现有时需要几秒钟来呈现表单，这是等待数据返回的结果。这会导致最初显示一些本不应该出现的内容。
下面是HTML外观的一个小示例：
<div class="col">
<h1>{{list.displayName || 'Create New List'}}</h1>
<p *ngIf="isNew" class="text-muted&#
浏览 1提问于2017-05-31得票数 0
3回答
我需要帮助找到正确的方式，以显示我的JSON数据的角7模板。正如您在下面的JSON示例中看到的，我有一个带有多个标识号的person对象，我使用*ngFor在模板中显示它们，并使用*ngIf匹配类型并显示数字。但是，此方法将只显示数据可用的字段，如果没有从JSON对象返回学生ID，则不会显示包括标签在内的整个字段。
我的第一个问题是，我是否通过使用*ngIf来匹配ngFor中的id类型来做正确的事情？
其次，是否有另一种方法来表示标识数据，如果id类型不可用，例如studentID类型不返回，我可以使用模板显示N/A？
*更新重复的护照错误
JSON数据样本
person = {
name
浏览 1提问于2019-07-17得票数 0
1回答
我是ionic 2的初学者
下面是我的HTML代码，我用它来启用使用ionic框架的侧边菜单
<ion-content>
<ion-list *ngIf="!isUserLoggedIn()">
<button menuClose ion-item *ngFor="let p of loginPages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
<
浏览 0提问于2017-02-20得票数 0
如何在用户点击mat-panel-description时不展开面板
仅当用户单击mat-panel-title时展开面板
<mat-expansion-panel hideToggle (expanded)="item.panelOpenState" *ngFor="let item of matchList; let i = index" #matchListPanel>
<mat-expansion-panel-header>
<mat-panel-title>
<div class=
浏览 1提问于2021-03-02得票数 0
2回答
我正在使用JSON文件创建一个Ionic应用程序。现在一切都还好，就在我想要使用ngIf和JSON的时候。我不知道怎么用..。例如，我想这样做：
<p *ngIf="{{item.price }} == 1"> Okey </p>
<p> *ngIf="{{item.price}} == 2"> Okey2 </p>
在json文件中，如果价格值为1，它将显示“of”。
希望你能理解我。谢谢
浏览 0提问于2018-04-19得票数 0
回答已采纳
我的工作角度6反应forms.Facing问题与validation.Details如下。1)我只能够显示用户名是必需的message.Where，因为其他显示与空白警报box.Please检查下面的图像。我不明白问题在哪里。
此外，我无法在图像中添加component.Posting it的类型脚本代码。
HTML代码
<div class="signUpForm">
<p class="formHeader">Enter Your Details</p>
<form class="containe
浏览 0提问于2018-07-31得票数 2
回答已采纳
我希望能够将这个"threeMonth和赠送“模型作为一个对象来查看它们是否可见，如果它们不可见，则显示最后一个标记。基本上，我想要一个if/else if/else
<p [(ngModel)]="threeMonth" name="threeMonth" *ngIf="(offers.offerAnnualIssues - offers.nssIssues) > offers.nssIssues">*3 MONTHS OF ISSUES</p>
<p [(ngModel)]="compl
浏览 7提问于2016-06-29得票数 0
我们尝试将数据对象中的内容放在行和列中。然而，屏幕显示为空，当我们检查错误时，控制台上显示未捕获错误，但我们困惑于找出哪些行是确切错误的，以及如何修复它们。类型脚本部分正常。似乎所有的错误都在组件的HTML部分。代码如下：
<div class="container justify-content-center">
<div class="row row row-centered justify-content-center" *ngFor="let restaurant of restaurants; let i = index
浏览 0提问于2018-07-21得票数 0
1回答
我想为我的ionic应用程序提供一个显示隐藏功能：
以下是我到目前为止在xyz.html文件中所做的工作：
<ion-item>
<p class="font_c_2 gra_reg" (click)="onPtagClick(part.reg_id)" *ngIf="!PtagClicked">
{{part.fsp_partner_location}}
</p>
<p class="font_c_2 gra_reg" *ngIf="PtagClic
浏览 3提问于2018-03-03得票数 0
回答已采纳
我试图单击此日历并使用selenium自动插入日期，但我得到了以下错误：
无效元素状态:元素必须是用户可编辑的，才能清除它。
HTML片段
<a id="enddate-dropdown" class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="">
<p class="custom-datepickers__date-prefix ng-binding
浏览 1提问于2019-11-15得票数 3
回答已采纳
1回答
在这篇文章Hide chat if in the same minute as the last chat in angular之后，我得到了一个错误，如下所示 enter image description here 红线，时间没有显示，但在它下面(绿线)，它又出现了。绿色的线就是我想要的，我使用这个ngIf语句 <div *ngIf="message.time === messages[i - 1]?.time && message.author !== messages[i-1]?.author" [ngClass]="{ 'bot
浏览 18提问于2021-05-10得票数 0
回答已采纳
在由*ngIf操作符分隔的||中，我有多个选项。我还设置了一个else操作符来显示什么都不是真的。问题是，它会在每个操作上显示else块，而不是显示整个操作。
NgIf块与ngFor
<ng-container *ngFor="let expense of expenses">
<div *ngIf="sortBy && sortByColor && sortCategory.color == expense.category.color || sortBy && sortByTitle &am
浏览 0提问于2019-04-22得票数 1
回答已采纳
1回答
我使用的是角度模板驱动的表单。目前，我在HTML页面中显示了错误消息。
<input
type="email"
name="email"
ngModel
#email="ngModel"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
required>
<br/>
<div *ngIf="email.touched">
<p *ngIf="email.errors
浏览 7提问于2021-05-21得票数 0
如果给定字段为空、太短或太长，我试图隐藏/显示适当的错误消息。
<form #applicationForm="ngForm" (ngSubmit)="saveApplication()" class="form-horizontal">
<div class="row-fluid">
<div [class.has-error]="name.touched && name.errors" class="form-group
浏览 5提问于2016-06-08得票数 1
回答已采纳
1回答
我使用PrimeNG，我会用一个条件数据，如果条件为真，合并2列(这里是水平两个单元格)。但我在中看不到这方面的任何内容。这有可能吗？为了提高精确度，我必须使用ng-template。第二件事是，我认为colspan不应该在这里工作(因为，我不能在其中插入angular )
<p-dataTable *ngIf="preferencesTypes && preferencesTypes.length > 0" [value]="preferencesTypes">
<p-column field="message&
浏览 0提问于2018-06-25得票数 0
在我拥有的html文件中
<p *ngIf="!checklistsready">
not redy
</p>
<p *ngIf="checklistsready">
Ready
</p>
在我的typescript文件中
checklistsready: boolean = false;
constructor(){
this.fetchChecks();
}
fetchChecks(){
this._checklistService.getAllchecks() //
浏览 15提问于2017-08-12得票数 0
回答已采纳
1回答
在我的应用程序中，我显示上诉的列表，以及它们的状态(使用mat图标显示)。这是我的模板
<div class="approve-detail" fxLayout="column" fxLayoutGap="10px">
<p>Created: {{absDetail?.reqDate|date:'d. L. y HH:mm'}}</p>
<ng-container *ngIf="absDetail?.defList">
<
浏览 5提问于2022-06-24得票数 0
3回答
this.employeeForm = this.fb.group({
fullName: [
'',
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(10),
],
],
email: [''],
skills: this.fb.group({
skillName: [''],
浏览 5提问于2022-10-04得票数 0
我有一个与其他组件一起使用的可重用的模式组件。
我使用的模态框架来自ng-bootstrap (NgbActiveModal)。
该模型只列出一组字符串，这些字符串来自名为它的父组件。
但是，根据父组件的不同，我希望模式以不同的方式显示。例如，我可能需要它来显示一个表而不是一个列表。我是这样做的：
<div class="modal-body">
<div *ngIf="data.encoding !== undefined">
<p>Hello {{data.name}}. These are your badl
浏览 0提问于2018-03-27得票数 1
回答已采纳
如何为angular2中的div内容添加分页，以及如何使用p为div添加分页。我将日志列表显示为paragraph.So我想为每10行p标记添加分页。
下面是我的html文件代码：
<div id="default_log" class="col-md-12" *ngIf="hidediv" >
<div id="top-padding">{{servername}} {{logType}}
<a i
浏览 1提问于2017-04-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
