在*ngIf中使用两个变量
在ngIf中使用两个变量，是指在Angular中使用条件指令ngIf来控制模板中的元素是否显示，同时该指令可以使用两个变量进行条件判断。
*ngIf是Angular框架提供的一个结构型指令，用于根据条件决定是否渲染或移除某个元素。它可以通过判断两个变量的值来确定是否显示对应的元素。
在使用*ngIf时，我们可以使用逻辑运算符（如&&、||）来结合两个变量的值进行条件判断。例如：
<div *ngIf="variable1 && variable2">
<!-- 显示的内容 -->
</div>上述代码中，如果variable1和variable2都为true，那么该<div>元素将会被渲染并显示出来；如果其中一个或两个变量为false，那么该<div>元素将会被移除或不渲染。
在实际应用中，*ngIf的使用场景非常广泛。例如，可以根据用户的登录状态来决定是否显示某些功能模块，或者根据某些条件来显示不同的内容。
在腾讯云的产品中，推荐使用云函数 SCF（Serverless Cloud Function）来实现在*ngIf中使用两个变量的功能。云函数 SCF 是一项无服务器计算服务，可以帮助开发者在云端运行代码，实现按需执行的功能。您可以使用 JavaScript、Node.js、Python、Go 等语言编写云函数。
腾讯云云函数 SCF产品介绍链接地址：https://cloud.tencent.com/product/scf
相关·内容
3回答
我有两个输入元素，它们在*ngIf条件下显示。
<input type="text" id="textInput" *ngIf="showTextInput">
<input type="number" id="numericInput" *ngIf="showNumericInput">
<button (click)="editButtonClicked($event)">
单击按钮应将焦点设置为适当的输入元素。
editButtonClic
浏览 0提问于2019-06-24得票数 2
回答已采纳
一直试图将两个可观察到的数据合并到一个*ngIf中，并在两者发出时显示用户界面。
采取：
<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
<b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
</div>
来自：
但是，在我的示例中，language$和user$将来自两个HTTP请求，而且似乎user$抛
浏览 3提问于2017-11-20得票数 73
回答已采纳
Body标记可以有两个可能的类名dark和light，在不在.ts文件中声明变量的情况下，检查哪个类是活动的最好方法是什么
<body class="dark"></body>
or
<body class="light"></body>
<img *ngIf="If body is having class name 'dark' show this">
<img *ngIf="If body is having class name &#
浏览 0提问于2019-08-27得票数 0
<div *ngIf="store[obj?.FundCode + obj?.PayWith].status == 'fail'">test</div> 我使用上面的语法来连接两个字符串来映射一个数组。它工作得很好，但当我尝试使用下面这样的拆分函数时，我得到了模板解析错误。 <div *ngIf="store[obj?.FundCode + obj?.PayWith.split(/[ ,]+/).join('-')].status == 'fail'">test</div
浏览 8提问于2019-03-01得票数 1
回答已采纳
5回答
有两个按钮(编辑和提交)，哪个按钮在单击时应该像切换显示/隐藏样式一样工作
<button (click)="showEditBtn = false;" *ngIf="showEditBtn;"> Edit</button>
<button (click)="showEditBtn = true;" *ngIf="!showEditBtn;">Submit</button>
我需要showEditBtn变量在默认情况下应该是true，而不需要接触脚本文件
是否可以为模板中的变量赋
浏览 1提问于2019-05-22得票数 7
回答已采纳
我在Angular2中有两个同级组件：
<test1 *ngIf="data" [data] = "makes" #test1R></formModel>
<testing *ngIf="data" [test1Ref]="test1R"></testing>
组件“测试”有一个调用test1组件函数的函数：
export class Testing{
@Input() test1Ref: test1Component;
constructor() { }
浏览 5提问于2016-12-13得票数 0
回答已采纳
我只发现了两个错误(在html中的两个位置出现了相同的错误) <label for="category"
>Category
<select
class="form-control category"
[(ngModel)]="productModel.category"
#title="ngModel"
[ngClass]="{ 'is-invalid': pf.submitted &
浏览 25提问于2019-02-05得票数 0
2回答
我使用这两个条件，问题是按钮同时出现，而实际上只有一个按钮出现。
如果"currentState == 'pause'" = "currentState == 'pause' && 'taskdate'> 'data.key.deadline'"，则另一个按钮出现.问题是两者都出现了，而不仅仅是1。我认为这是因为currentState在两个方面都是正确的.我怎么才能解决这个问题？
html
<div *dxTemplate="let data of '
浏览 0提问于2019-12-17得票数 1
回答已采纳
3回答
我试图根据服务结果显示和隐藏HTML元素。我使用的是*ngIf="messageService.getData() | async"，但它并不能显示或隐藏元素。我正在使用异步，否则“失败消息”会在短时间内显示，然后显示“成功消息”。
我有两个这样的标签：
<div *ngIf="messageService.getData() | async">Successful Message</div>
<div *ngIf="!messageService.getData() | async">Failure Mess
浏览 13提问于2019-10-08得票数 4
回答已采纳
1回答
我在ngIf属性中传递一个布尔函数，而不是在html模板文件中传递布尔条件。但是这个布尔函数是根据变量消息中的数据量来重复的。如果消息有两个对象，而控制台中的ctr值从1增加到69，而不是只有1或2。在ngIf属性中传递函数的原因是什么，以及如何避免？
<ion-row *ngFor="let message of messages; let i = index; trackBy:trackByMsgId">
<ion-badge *ngIf="isNewDate(i)" color="primary" class
浏览 2提问于2020-09-13得票数 2
回答已采纳
我正在努力确定国家管理的最佳做法。也就是说，两个子组件的父是否应该管理这些子组件的状态。
例如：
<div>
<subcomponent-one> *ngIf="condition"></subcomponent-one>
<subcomponent-two> *ngIf="!condition"></subcomponent-one>
</div>
在每个子组件中，可以分派各种ngrx操作。但是，某个操作可能导致更改condition: bool。
所以问题是:
浏览 3提问于2022-01-10得票数 0
我在一个父组件中动态创建了一个子组件，用于处理<form>组。孩子看起来如下所示： <div>
<input [name]="name" #password="ngModel" required [(ngModel)]="pendingAccount.Password" />
<input *ngIf="withPasswordRepeat" name="repeatedPassword" #repeatedPassword="ngModel
浏览 3提问于2020-10-09得票数 0
回答已采纳
1回答
在*ngFor中使用*ngIf中的变量时，我遇到了一个问题：
<li *ngFor="let event of enum ; let i = index">
<textarea pInputTextarea autoResize="autoResize" [(ngModel)]=x[i] placeholder="xxx" formControlName=desc{{i}}></textarea>
<div class="alert" *ngIf="!rForm.cont
浏览 0提问于2018-04-19得票数 0
回答已采纳
已经有了类似的question，我尝试了这些解决方案，但不起作用。 实际上，问题是onHide事件没有触发，因为*ngIf，如果我删除了*ngIf onHide就会触发。 <p-dialog [(header)]="dialogText" *ngIf="displayDlg" [(visible)]="displayDlg"
[modal]="true" [responsive]="true" (onHide)="close()"> 但问题是，如果我不使用*ngIf，我会将表单
浏览 13提问于2019-03-05得票数 1
我有两个具有编辑行的表(p-table)。但是，当我更新第一个表中的行值时，它也会更新第二个表。如何将此表行设置为唯一？
->表组件：
<p-table [value]="coberturas" dataKey="id" editMode="row">
<ng-template pTemplate="header">
<tr>
<th class="width-20rem">
{{ t("coberturas.dadosCober
浏览 12提问于2022-04-11得票数 0
回答已采纳
我的html中有两个列表。
<div class="list" *ngIf="models !== undefined && models.length">
<div class="model" *ngFor="let model of menuModels">
<div class="name">{{model.name}}</div>
</div>
<div class="opera
浏览 1提问于2020-05-07得票数 0
回答已采纳
3回答
代码:
<app-part [search]='search' *ngIf="isPart"></app-part>
<app-partlist [search]='search' *ngIf="isPartList"></app-partlist>
Todo :
使两个组件中只有一个可见。
在下面的代码中，这两个选项卡一次都是真的，...I试图一次打开一个选项卡。
getItem(search: Search) {
if (search.i
浏览 0提问于2018-08-21得票数 0
1回答
在组件中使用这些div：
<div ngIf="condition1">
<button (click)="set_condition1_false_and_2_true()">show-template-2</button>
</div>
<div ngIf="condition2>
<button (click)="set_condition2_false_and_3_true()">show-template-3</a>
</
浏览 2提问于2018-02-26得票数 0
回答已采纳
我有componentB，哪个HTML有Modal引导代码。在ComponentA中，我需要在componentA中打开componentB。
弹出窗口没有显示在UI中。在检查页面时，组件正在加载，但它没有显示在UI中。
<app-root>
<app-a>
<app-b></app-b>
</app-a>
</app-root>
注意:我在这两个组件中没有任何CSS。
ComponentA.html：
<button (click)="popup()">Open</bu
浏览 1提问于2019-11-24得票数 1
回答已采纳
我以前使用过ngClass，应用类取决于之前javascript/typescript中保存的变量的布尔值。但是，我想知道是否可以基于本地HTML布尔值应用它？
即。
<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}">
<div class="header">
<div class="itemName">Text</div>
<
浏览 0提问于2018-12-05得票数 0
回答已采纳
在角2中，当#elementReference与*ngIf一起使用时，即使在*ngIf表达式计算为true之后，对元素的引用仍然是undefined。在下面的示例中，将不显示input's值。
<input *ngIf="true" type="text" #myRef (input)="a = 'b';" class="form-control input-lg">
<pre> {{ myRef?.value }} </pre>
但是，以下这些都会奏效(让我感到惊讶)。
浏览 8提问于2016-06-24得票数 2
1回答
我有一个父组件，它包含两个不同的组件。在“项目”组件(子项目)中，我有下拉列表，用户可以从中选择任何可用的项目。
当从下拉列表中选择任何项目时，我需要使用ngIf创建其他组件。
从这里可以看到，我已经将ngIf放置在父组件中，用于我想要受影响的组件。
<div class="tab tab-style">
<ribbon-item style="width:10%;" [title]="'Load/Save Project'">
<project></project>
&l
浏览 1提问于2017-09-17得票数 1
回答已采纳
2回答
我有一个DOM结构：
<div class="dropmenu_block_header" *ngIf="getLanguages(group).length">
<div *ngFor="let language of getLanguages(group); trackBy: trackByFn"></div>
</div>
正如您在模板中看到的，有两个调用：
*ngIf="getLanguages(group).length"
*ngFor="let langu
浏览 0提问于2019-10-31得票数 0
回答已采纳
我有一个标题，有几个按钮，如主页，关于我们，注册，登录，注销，注册，我想显示除登录和注册之外的所有用户登录时，只有这两个如果用户没有登录。
我知道我可以使用这样的东西：
<li *ngIf="!isUserLoggedIn"><a href="#">Log in</a></li>
<li *ngIf="isUserLoggedIn"><a href="#">Log out</a></li>
<li *ngIf="!isUs
浏览 3提问于2016-08-30得票数 1
回答已采纳
2回答
我有一个变量，可以从父级和子级编辑。
parent.html：
<div *ngIf="editEnabled">
<mat-icon (click)="disableEdit()">cancel</mat-icon>
</div>
<child [(editEnabled)]="editEnabled"></child>
parent.ts：
export class ParentComponent {
editEnabled: boolean;
d
浏览 0提问于2018-07-23得票数 16
回答已采纳
在我想要显示图标的基础上，如果有人选择了多个图标，则图标不应该出现。在上面两个不同的图标将会出现
<tr *ngFor="let data of mainData | paginate: { itemsPerPage: 10, currentPage: p } ; let i=index;">
<td>
<input class="custom-checkbox" (change)="onFilterChange($event,data)" type="checkbox" name=&
浏览 1提问于2018-11-02得票数 0
3回答
在template *ngIf中绑定变量和绑定方法有什么区别吗？
例如：
案例1:
<div *ngIf="myVar">ABC</div>
案例2:
<div *ngIf="myFunction()">ABC</div>
myFunction() : boolean {
if (cond1 && cond2 && cond3) {
return true;
} else {
return false;
}
}
对性能有什么影响吗？
浏览 0提问于2018-08-07得票数 5
我遇到了一个奇怪的问题，所有这些都是因为allIpRecords: any;，其中我想要维护ipRecords: any;的副本，因为在原始代码中，ipRecords可能会更改，而我想在allIpRecords中保留以前的副本，问题是每当insert函数运行时，如果我在insert函数中有this.allIpRecords = res.data;，那么在数组ipRecords和this.allIpRecords中都会创建插入行的重复条目，并且在表中显示相同的行两次。如果删除this.allIpRecords，则不会发生这种情况，只有一项插入项在数组中。即使在数据库中它只插入一次，但在本地数组中
浏览 27提问于2019-05-29得票数 0
回答已采纳
3回答
我正在使用ngOnInit()中的以下代码在HTML中使用它来绑定某些内容，并且由于某些原因无法识别问题，也无法在网页上打印任何内容！有人能指点或帮忙吗？
TypeScript：
public ngOnInit() {
let one = true;
let two = false;
let three = true;
let four = true;
let caseA = one && two && three && four;
let caseB = one && !tw
浏览 1提问于2021-07-13得票数 2
回答已采纳
1回答
<li class="nav-item ml-0 ml-md-auto" ngbDropdown #dropdown="ngbDropdown">
<a class="nav-link dropdown-toggle" ngbDropdownToggle>
<i class="fa fa-user mr-1"></i>
<span *ngIf="!token">Accounts</span>
浏览 1提问于2018-05-13得票数 0
回答已采纳
1回答
我想在两个组件中声明一个共享变量，并且希望组件具有共享值。我在想这能不能办到。
A.html
...
<button (click)="sendInfo(a,b,c)" > </button>
...
B.html
...
<div *ngIf="showData" > {{loadData()}} </div>
...
A.component.ts
...
showData = false;
sendInfo(a: string, b:string, c:string) {
//calling webservi
浏览 0提问于2018-09-14得票数 1
回答已采纳
2回答
表格中的最小长度验证不起作用
、、、、
我试图理解，如果我这样写验证，为什么它不能工作，并给我奇怪的结果，如果我输入3，而不是4，然后转到下一个字段，它运行两个div
名字是必需的
应该是最小4长
如果我输入了4个后来者并继续前进，那么显示的长度应该是4
<div class="form-group">
<lable for="secondName">Second Name</lable>
<input type="text"
ngControl='secondName'
浏览 1提问于2016-08-11得票数 0
我面临着多个嵌套的ngIf应用于Angular.js中的ng-template元素的问题，而且我似乎无法得到完美的答案。我知道解决办法，但它们没有得到优化。
这是我试图运行的代码：
<div class="container">
<ng-template *ngIf="booleanA;then caseA else caseB">
<ng-template #caseA>
<el>1</el>
<el>2</el
浏览 0提问于2018-05-11得票数 2
回答已采纳
3回答
我想根据条件更改模板变量的值。
<ng-container *ngIf="'first' as myVar">
<ng-container *ngIf="myVar == 'first'">
<ng-container *ngIf="'later' as myVar">
<div>{{myVar}}</div>
</ng-container>
</ng-container>
浏览 5提问于2022-06-07得票数 -1
回答已采纳
我有一个场景，用户可以打开mat-select并从下拉列表中选择一个选项。一旦他被选中，就会显示一个隐藏的表格，供他填写。所有的静态(一)模板都没问题。现在，我们决定让mat-select和相应的模板链接到角formArray内的选项。我现在面临两个问题: 1-所有生成的表单中的所有mat-select都侦听同一个事件(用户选择的选项)。也就是说，当您在索引0中更改mat-select时，索引1中的mat-select会对您的更改做出反应。2-所有生成的表单都显示在模板中，该模板链接到用户从第一个选择中选择的选项(formArray中的索引0)。
没有语法错误。
我猜这个问题源于我定义的一个全
浏览 0提问于2021-01-23得票数 0
回答已采纳
1回答
我需要访问*ngIf中我的url的路径。我试过以下几种方法：
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'my-app',
providers: [],
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
constructor(public route: ActivatedRoute) {
浏览 0提问于2017-08-25得票数 0
回答已采纳
4回答
如果有异步数据的话？
、、、
在我的角navbar中，我有一个*ngIf，不管是不是登录/注销按钮都应该显示。
*ngIf="!authService.loggedIn()
它使用带有此loggedIn函数的服务，该服务返回true或false。
loggedIn() {
return this.http.get('http://localhost:3000/users/validateToken')
.map(res => res.json()).map(data => data.success);
}
但是这是异步的，我如何使我的ngIf等待它？或者我怎样
浏览 1提问于2018-06-06得票数 3
回答已采纳
input元素在inputVisibleIfThisIsTrue = true之后是未定义的，因为它在ngIf中，我可以使用延迟，但如果使用转换和效果怎么办，我不想担心延迟设置为多少时间。
if (this.something) {
this.inputVisibleIfThisIsTrue = true;
this.input.nativeElement.focus(); // this.input is undefined because ngIf takes time
}
那么，当ngIf准备就绪时，我如何才能使用this.input.nativeElement.focu
浏览 1提问于2019-01-11得票数 1
1回答
我是angular的新手，现在正在使用一些遗留代码。在一个组件中，有一个带有let循环的表。我在网上找过了，但理解得不太好。
<ng-template #itemTmpl let-data let-element="element">
<ng-container *ngIf="data === 'route'"> {{ currentRouteSubject.value.number }} </ng-container>
<ng-container *ngIf="data === '
浏览 169提问于2019-08-05得票数 3
3回答
我从身份验证服务中获得了一个可以观察到的信息，该服务可以告诉我用户是否已登录。我希望某些元素在我的标题中是可见的，这取决于我的用户正在访问的页面。我已经创建了两个返回布尔值的函数。
如果用户没有登录，那么元素应该是可见的。如果用户在登录页面中，那么元素就不应该是visbile。
isLoggedIn$: Observable<boolean>;
ngOnInit() {
this.isLoggedIn$ = this.authService.isLoggedIn;
}
shouldShowBlueBanner(): boolean {
if
浏览 1提问于2018-05-17得票数 0
回答已采纳
1回答
我有一些分页ui，目前正在加载之前，我的数据到达我的角2应用程序。这会产生一种不需要的视觉效果，即分页ui组件从页面顶部开始，然后在数据填充后移到底部。我想通过使用*ngIf语句包装分页div来处理这个问题，这样分页组件就不会在数据存在之前加载。
数据存储在一个“记录”变量中，并被迭代并通过视图中的分页管道传递，如下所示：
<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 15, currentPage: page, totalItems: customer
浏览 1提问于2017-03-09得票数 1
回答已采纳
1回答
我是新手，所以如果我用错了术语，请原谅我。现有的Component.HTML页面包括一个自定义标记，它是一个菜单。根据标记的放置位置，我希望传递一个参数，该参数将被视为查询参数。最终，我将该参数传递给API端点。这个参数是可选的，所以我不想(不能)使用路由器参数。
下面的代码显示了component.html的一部分，其中包含标记<home-loan-submenu style="display: contents;" [loanId]="loan.loanHeaderId" [source]=source ></home-loan-subme
浏览 1提问于2020-08-18得票数 1
在我的模板中：
{{(services | async)?.length}}
返回"3“-数组中的许多项。但当我使用*ngIf时：
<ion-text *ngIf="(services | async)?.length == 3">{{(services | async)?.length}}</ion-text>
什么都不显示。我不明白为什么*ngIf返回假？
浏览 1提问于2019-11-21得票数 0
回答已采纳
在我的角形6应用程序中，我想在单击一个按钮时添加多个NG-QUILL编辑器.
<mat-accordion *ngFor="let sectiondata of ViewDalContent?.sections; index as i">
<mat-expansion-panel class="viewdal" id="{{sectiondata?.id}" multi="false">
<mat-expansion-panel-header class="mat-pri
浏览 1提问于2019-04-01得票数 0
你好社区！我是天生的角斗士！我想在我的按钮上实现一种方法，目的是在单击单选按钮( compaign或script )之后显示两个面板，注册ans脚本！我其实不知道该怎么开始！因为这两个面板是用html编写的，所以方法应该使用类型记录！我已经开始在面板*ngIf="option === 'compaign'"中提到两个条件，第二个条件是*ngIf="option === 'script'"分别在面板Compaign和script中，如下所示！
* gotosearch.component.html*****
<form
浏览 2提问于2019-10-03得票数 0
回答已采纳
1回答
我有一个带有ngIf的项目列表，如下所示
<ion-list>
<ion-item *ngIf="isItemInThisYear(item.id)">
</ion-list>
每个项目可以出现几次，但只有今年的记录才会出现。这个很管用。
单击此列表中的项时，我希望刷新列表，但这一次，列表只应显示所选项目的记录(无论日期)。
我知道我应该更改(名称) isItemInThisYear，以适应这两个选项，但是如何将值/参数从单击的项发送到整个页面，这样它就会用相关的参数重新加载它的列表？
浏览 3提问于2018-06-25得票数 0
回答已采纳
我有一个父组件和一个子组件。子组件中有一条ngif语句。我想在父组件中使用相同的ngif。以下是示例代码。 子组件： `selector: 'child-component',
template: `
<div class="container">
<div class="panel panel-danger">
<div
class="panel-heading"
(click)="opened = !op
浏览 13提问于2019-05-24得票数 1
我正在做一个评论小部件的可点击原型。目前，我在一个文本区域中显示注释。我想要禁用文本区，除非选择了“编辑”选项，我想始终显示最多3行的文本区。我在使用文本区和*ngIf时遇到的问题是，如果在单击“编辑”后为{{note.note}}提供了任何输入，那么一旦我单击另一个文本区的编辑选项，输入就会丢失。如果我不使用*ngIf，那就不会发生这种情况。但是，如果不使用ngIf，我如何才能改变样式并禁用文本区？我尝试使用*ngIf在文本区域或段落之间切换，但如果我这样做，我也会丢失在为另一个条目单击“编辑”后输入的任何注释。
<div class="note-block">
浏览 5提问于2017-03-10得票数 0
回答已采纳
在我们的应用程序中，我们必须根据一些逻辑来显示/隐藏一个按钮。哪里是定义这个逻辑的更好地方(为什么)？在Html中：
*ngIf='here goes the logic'
//Or
*ngIf='someBoolean' and in typeScript someBoolean = 'here goes the logic'.
浏览 16提问于2019-07-19得票数 0
回答已采纳
在我的组件中，我想根据当前的布线参数显示一个文本，在模板中我这样做了： <h1 *ngIf="mode === 'edit'">Modifier</h1>
<h1 *ngIf="mode === 'add'">Ajouter</h1> 在ngOnInit函数中，我有这样的设置： this.route.params.subscribe(params => {
this.id = +params['id'];
this.currentMode =
浏览 13提问于2019-01-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
