在组件html中使用OR的Angular *ngIf条件
在组件html中使用OR的Angular ngIf条件可以用来在模板中根据多个条件来控制元素的显示与隐藏。ngIf是Angular的结构指令之一，用于基于条件来添加或移除DOM元素。
当需要在条件表达式中使用OR逻辑运算符时，可以通过使用圆括号来分组条件，并使用两个竖线（||）来表示OR运算符。下面是一个示例：
<div *ngIf="(condition1 || condition2)">
<!-- 元素内容 -->
</div>在上面的代码中，如果condition1或condition2为真，div元素会被渲染并显示在页面上。如果两个条件都为假，则div元素会被移除或隐藏。
应用场景： 在实际开发中，使用OR的*ngIf条件可以适用于多个条件中只需要满足其中一个条件时显示元素的场景。例如，在一个表单中，如果用户输入了有效的电子邮件地址或手机号码，则显示提交按钮。
推荐的腾讯云相关产品：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于运行各种应用程序和服务。
- 腾讯云对象存储（COS）：安全、稳定、低成本的云端对象存储服务，可用于存储和管理静态文件和多媒体资源。
- 腾讯云容器服务（TKE）：用于快速构建、部署和管理容器化应用程序的托管式Kubernetes容器服务。
- 腾讯云函数计算（SCF）：事件驱动的无服务器计算服务，让您能够编写和运行无需管理服务器的代码。
请注意，以上推荐仅为示例，并不是必须使用腾讯云相关产品。
相关·内容
在角6模块中，我有app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRo
浏览 2提问于2019-12-06得票数 3
我有倒计时jQuery函数在我的Angular2 *ngIf，它是不工作的。我的console.log中没有任何错误，但是div是空的。它只是显示标题(h1)。这是我的代码: HTML
<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>
Angular2 TypeScript组件
ngOnInit() {
this.getDat
浏览 4提问于2017-02-04得票数 4
回答已采纳
在我的app.component.html中，我有导航条和路由器插座.我想从登录页面中隐藏navbar，并在登录页面之后显示它，我使用了角-2/jwt助手来检查本地存储中是否有令牌，并且我根据返回值将导航条隐藏在登录页面中。但是登录后导航栏没有显示，请提前帮助me.Thanks
app.component.ts
================
ngOnInit() {
this.authservice.userLoggedIn()
}
login-service.ts
================
import { Http, Headers } from &#
浏览 0提问于2018-04-12得票数 1
回答已采纳
当使用像*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
1回答
我从角2文档中了解到，ngOnInit方法是从服务器获取数据的地方，因此我所做的工作有问题：
组件
import { Component, OnInit } from '@angular/core';
import { Champion } from './champion'
import { ChampionService } from './champion.service';
import { ActivatedRoute } from '@angular/router';
@Component({
sele
浏览 2提问于2016-09-24得票数 0
回答已采纳
我有一个角度组件，应该显示不同的信息，取决于哪个按钮被点击到它。如果单击按钮1，我希望在component2中设置component2并使用ngIf显示正确的信息。如果单击按钮2，我希望设置button2=true并使用ngIf显示正确的信息。
这两个组件具有不同的urls，并且不是彼此的父/子组件。
下面的代码是我试图实现的一个简单的例子。
是否按下按钮1或按钮2，我如何与组件2通信？
comp1.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from
浏览 3提问于2021-01-22得票数 0
回答已采纳
2回答
Page-not-found.component.ts
import { FormsModule, NgModel } from '@angular/forms';
import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import {CommonModule} from '@angular/common';
import {NgModule} from &
浏览 5提问于2017-09-19得票数 0
回答已采纳
在我在ts文件中angular 2应用程序中，
ViewPages(Char: string): void {
this.selectedPage = Char;
}
在html中，我尝试在ngif中绑定select页面。
<td *ngIf="name[0] == {{selectedPage}}">{{name}}</td>
但它抛出了“”不能绑定到'*ngIf‘，因为它不是'td’的已知属性。
如果有人能在这方面帮助我，那就太好了。
浏览 1提问于2017-08-01得票数 2
我最近开始研究Angular (Angular 5)，路由是非常新的，但很弱。我的应用程序有3个名为Home, School, Office的选项卡，并且我有两种类型的用户Admin和non-admin。一旦点击Office选项卡，管理员将被重定向至管理员页面，非管理员用户将被重定向至非管理员页面。
因此，对于这个需求，我做了这样的路由：
app.module.ts
@NgModule({
imports: [
BrowserModule,
AdminModule,
NonAdminModule
],
declarations: [AppComnonent]
浏览 5提问于2018-11-29得票数 2
我正在开发一个Angular 5应用程序，现在我有了一个名为解决方案的组件，它从另一个组件获取数据。
它可以正常工作，但是当我按下浏览器的Reload按钮时，问题就会发生，所以没有数据发送给组件，所以我使用一个if语句来检查等于未定义的数据，然后它将重定向到主页。
实际上，它可以重定向到主页，但是导航过程需要一段时间才能重定向，同时，解决方案组件的其余部分继续加载，并获取所有等于未定义的变量，这样HTML中的任何count函数或toFixed()函数都将返回控制台中的错误。
我用解决了这个问题，将其余的ngInOnIt放在前面提到的if条件的isn语句中，在HTML中使用*ngIf语句来检查来
浏览 0提问于2018-10-24得票数 0
我有这种问题，想要添加一些额外的html内容的html内容，与条件逻辑。但问题是angular不能识别angular语法，而angular语法是从组件中手动添加的。 public isExist: boolean = false;
@ViewChild('appDropdown') appUnit: any;
ngOnInit(): void {
var el = this.appUnit._elementRef.nativeElement.querySelector('.list-area');;
el.insertAdjace
浏览 36提问于2020-12-31得票数 2
我是新来的。我正在集成MatDialog。我从棱角官方文档中复制代码。当我点击打开对话框时，我将面临这个错误。
这是我的donations.component.ts
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
export interface DialogData {
animal: 'panda' | 'unicorn' | 'lion';
}
@Component({
selector: 'app-donations
浏览 2提问于2020-07-16得票数 0
在我的html文件中，我得到的错误是
不能绑定到'ngIf‘，因为它不是div的一个已知属性，不能绑定到'ngIf’，因为它不是'app-set-username‘的一个已知属性，它不能绑定到'ngIf’，因为它不是‘app-登录’的一个已知属性。
我确实在html的module.ts中导入了module.ts。在我的其他html文件中，一切都正常。下面是不工作的html和模块：
<div class="user-page-wrapper">
<app-set-username
clas
浏览 3提问于2022-07-30得票数 1
回答已采纳
我有一个这样的组件
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent im
浏览 0提问于2020-01-13得票数 3
2回答
我已经创建了npm包sezam-sharedsInstall包给新的项目从这个包添加了组件：<sezam-overflow [show]="true"></sezam-overflow>到项目中出现了一个错误在浏览器控制台：core.js:9847 NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div'中
包中html的内容：
<div *ngIf="show">
...
</div>
浏览 5提问于2022-01-06得票数 -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回答
我有一个类( UserComponent )，它派生自另一个类(DetailComponent)，我调试并看到一切都如我所期望的那样工作(无一例外)，除了这个东西；细节组件的模板没有在我显式定义的UserComponent中呈现。下面的类和模板；
ArtistlistComponent；
import { Component} from '@angular/core';
import { Auth } from '../services/auth.service'
import { SpotfyService } from '../services/sp
浏览 0提问于2017-01-13得票数 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
回答已采纳
1回答
我正在使用提供者注入器将一个命令从登录组件发送到配置文件组件以注销。尽管控制台日志显示Signout函数已按预期工作，但(HTML) *ngIf指令并没有相应地更改。
我做错了什么？
**Signin component**
import {Component, OnInit, Injectable } from '@angular/core';
import {ProfileUserComponent} from '../profile.user.component/profile.user.component'
@Component({
se
浏览 0提问于2016-11-04得票数 0
6回答
如何使用ionic 2获取html元素值
在我的html代码下面
<div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'" >
<div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">
<div *ngIf="chat.date" style="text-align: center
浏览 47提问于2017-03-16得票数 19
我有一个边导航，它不是路由，而是填充内容区域。我在模板上使用了一大堆*ngIf，但我想知道是否有更好的方法？也许类似于<app-{display}></app-{display}>我将从模板中显示代码，您将能够更好地理解我所要求的内容。
模板是：
<div class="container-fluid">
<div class="row">
<div class="d-none d-md-block col-md-2 sidemenu">
<app-side
浏览 0提问于2018-03-28得票数 0
回答已采纳
3回答
如何在index.html中Angular2+中使用*ngIf条件。我希望根据使用*ngIf的条件加载标记，因为我在本地存储中有一个值。这是我的代码，但不起作用。
<head *ngIf="localStorage.getItem('theme_token') === 'site-layout'"></head
当我使用script标记时，它会在javascript中获得主题令牌的值。
<script>
var _val = localStorage.getItem('theme_toke
浏览 11提问于2020-06-13得票数 3
回答已采纳
1回答
嗨，我有一个网页与多个布局，我想切换到。类似于codepen.io。在angular2中做这件事的最好方法是什么？
假设我有4个布局。我可以放入*ngIf="layout1"，然后放入第一个布局，然后放入*ngIf="layout2"，然后放入第二个布局，依此类推。但这是最好的方法吗？请注意，当更改布局时，html和css都会更改。
浏览 0提问于2016-02-23得票数 4
不能绑定到'ngIf‘，因为它不是'div’的已知属性。
它的组件是：
import SessionService from '../session/session.service';
import { Component } from '@angular/core';
@Component({
providers: [],
selector: 'navbar-left',
styles: [require('./navbar-left.scss')],
template: require(&
浏览 63提问于2016-08-21得票数 352
回答已采纳
我搜索了很多简单、简单、最重要的制作工具提示的方法，但我似乎找不到一个统一的方法。我试过使用ngbToolTip来完成这一操作，遵循ng引导中的文档，但它似乎不起作用。以下是我的HTML：
<div class="checkboxes" *ngFor="let to of todo">
<label id="checkbox-label">
<!--<input *ngIf="to.importance != 'non'" type="check
浏览 4提问于2017-03-25得票数 0
回答已采纳
在按钮上单击要在TS文件中调用的函数CSS样式 html代码： <div class="overlay-loader">
<div *ngIf="isLoading" class="loader"></div>
<p *ngIf="results">{{ results | json }}</p>
<p *ngIf="error">Error: {{ error | json }}</p>
浏览 21提问于2019-01-30得票数 1
AuthComponent
import { TopnavComponent } from './../topnav/topnav.component';
import { Component, OnInit,ViewContainerRef } from '@angular/core';
import {AuthService} from "./auth.service";
import { NgForm } from '@angular/forms';
import {Router} f
浏览 1提问于2018-01-05得票数 2
对于angularjs 2，我需要使用@viewChild，但是它会引发错误，因为‘无法读取未定义的’‘的属性'rotateLeft’。父母:
<div><pdfReader [imageUrl]="imgsource" *ngIf="holeDocument.ext == 'pdf'"></pdfReader></div>
.ts
import { Component ,ViewChild } from '@angular/core';
import {PdfReader
浏览 1提问于2017-02-02得票数 3
回答已采纳
1回答
我想重写primeng的primeng组件的模板，我的代码是这样的：
my-datatable.component.ts
import { Component, OnInit, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
import { DataTable, DomHandler } from 'primeng/primeng';
import { ObjectUtils } from '../../../../node_modules/primeng/compone
浏览 8提问于2017-06-05得票数 7
回答已采纳
我对棱角不熟悉，我被卡住了。我似乎无法做到这一点，我想我只是在如何实现可观察到的方面犯了一些错误。目前，我使用一个本地json文件作为数据源，但在我的主要项目中，我将连接到一个外部API。我已经精简了一切，使它尽可能的基本，仍然没有运气。
这是campaign.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { CampaignService } from '../
浏览 1提问于2018-10-10得票数 2
回答已采纳
以下是一个自定义组件：
<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
2回答
目前正在攻读Angular5课程，在对这个主题做了一段时间的研究之后，我仍然不完全理解以下内容：
代码：
App.component.html：
<app-server-element
*ngFor="let serverElement of serverElements"
[element]="serverElement"
></app-server-element>
App.component.ts：
import { Component } from '@angular/c
浏览 5提问于2017-11-12得票数 4
回答已采纳
在angular.html中可以做两个ngIf吗？
举个例子：
if(1=2){
}else{
if(){
}
}
我需要做两次检查。
如果检查教室的可用性是错误的，请检查教师的限制。
下面是我的代码示例。我是angular的新手，我不知道每件事是如何工作的。
<td *ngIf="!restricaoSegUm; else templateName" *ngIf="!restricaoSalaSegUm; else sala" [dragula]='"another-bag"' [dragulaMod
浏览 7提问于2018-02-14得票数 1
我试图隐藏一些内容在UI中使用*ngif的angular4它不能正常工作。有人能帮我这个忙吗。它的值在另一个组件中不会改变。
导航栏模板：
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-md-0">
<li class="nav-item active">
<a class="nav-link"
浏览 1提问于2017-10-10得票数 1
1回答
我在我的离子型应用程序中使用了一个以模板URL作为表单的指令，并将"response“值存储在指令中：
questionForm.ts
import {Component, Input} from "@angular/core";
@Component({
selector: "question-form",
templateUrl: 'questionForm.html'
})
export class QuestionFormComponent {
@Input() public question: any;
@Input() p
浏览 0提问于2017-10-19得票数 0
回答已采纳
1回答
我是angular的初学者，我希望在我的组件的一些模板中插入这段HTML代码：
<ng-template #alertMessage>
<p *ngIf="!displayProductInfo" id="alertMessage">Please enter a bar code to display a model.</p>
</ng-template>
我应该将TemplateRef对象与@ViewChild()装饰器一起使用，还是应该使用指令？
非常感谢
浏览 4提问于2021-07-19得票数 0
我有一个简单的表格，里面有表格验证。我想在另一个组件中显示用户输入，但我不确定如何这样做。我想使用@Input来解析从一个组件到另一个组件的信息。尽管我在网上读到了关于它的文章，但我还是不知道如何实现它。
html
<form [formGroup]="checkOutForm" (ngSubmit)="submit()">
<div class="input-container">
<div><label></label
浏览 1提问于2022-07-13得票数 0
我正在学习Angular2，我现在遇到了一个问题。在我的页面中，我有一个“登录”按钮。用户登录后，我想将其更改为“注销”。因为这个按钮在app.component中，所以它只加载一次。提前谢谢。
我的app.component.html
<a *ngIf="signedIn==true" [routerLink]="['Logout']">Log out</a>
<a *ngIf="signedIn==false" [routerLink]="['Login']"&g
浏览 3提问于2016-04-08得票数 0
回答已采纳
我的angular6项目中有这个控制台错误: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression在检查后发生了更改。上一个值：'flag：‘。当前值：'flag: null‘。 这是ts组件子组件中的代码 @Input() flag: any; 这是html组件子级中的代码。 <div *ngIf="flag !== 'ABBONAMENTO_MDA'">
<div class="form-group col-lg-3 col-md-3&
浏览 17提问于2020-06-29得票数 0
1回答
路由角4/5隐藏部件
、、、
新的路由与角4/5，我是跟随角教程在他们的网站上。我有一个有角度的应用程序，我希望能够有两个单独的页面。现在主页是localhost:8870/dr3-interface，我想要一个在localhost:8870/dr3-interface/manage_cycles_instances上有新组件的新页面
我的问题是，当我单击链接Manage cycles instances时，它会显示我的所有app.component组件，而不仅仅是我决定在app.component上显示的组件。我试着用*ngIf隐藏它们，但没有结果。有什么想法吗？
app.component.html：
<div
浏览 0提问于2018-02-14得票数 2
回答已采纳
如果有一个带有路由器的子组件，并通过绑定保持它们的更新，我如何共享变量？
这是我代码的一部分：
app_component.dart：
import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
import 'package:angular2/router.dart';
import 'package:my_app/profile_component/profile_component.dart&
浏览 3提问于2017-05-05得票数 4
回答已采纳
我试着遵循这个中列出的步骤。它可以加载包含以下组件的搜索框：
map.component.html
<input id= 'box2' *ngIf="boxReady" class="controls" type="text" placeholder="Search Box">
<input id = 'box' class="controls" type="text" placeholder="Search Box">
ma
浏览 0提问于2020-03-20得票数 0
回答已采纳
我在使用路由器组件(角4.4.6)生产(服务器与apache)时遇到了问题，下面是我的代码：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router} from '@angular/router';
import { Routes, RouterModule } from '@angular/router';
@Component({
selector: 'app-root',
template:
浏览 1提问于2018-03-27得票数 0
我有用户名单。我希望当光标在按钮上悬停时，它将*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
我正在尝试用angular 2创建一个应用程序，并且在我的应用程序中有一个身份验证服务，我的html模板是这样的：
<header>
<div *ngIf="isLogin()"><a href="">profile</a></div>
<div *ngIf="!isLogin()"><a href="">register</a></div>
<div *ngIf="!isLogin(
浏览 1提问于2016-05-15得票数 3
2回答
在我的项目中，有一种情况，即必须根据为特定登录用户提供的角色权限隐藏内容。
因此，我们制作了一个名为<app-authorise>的全局组件，它将根据用户拥有的权限启用子组件。
Component.ts
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { GlobalService } from '../../../core/global/global.service';
@Component({
selector: 'a
浏览 1提问于2019-02-17得票数 1
回答已采纳
1回答
我有两个组件(成员组件和配置文件组件)。我的要求是隐藏成员组件中的前向按钮，即
member.component.html
<div *ngIf="(post.PostPositionClass === 'message left') && enableForward" class="text-right cursor-pointer">
<i class="fa fa-forward"></i>
浏览 1提问于2021-10-05得票数 0
我是angular的新手，需要一些帮助。我有这个按钮，它只出现在一张卡片上。但是，我想在4张不同的卡片中展示它，这些卡片都有不同的条件。在同一组件的不同卡中显示按钮的最佳方式是什么？ <mat-card
*ngIf="oldUsers && !!retiredUsers"
>
<button
mat-raised-button
(click)="openDialog()"
[disabled]="newUser"
>
<mat-icon>delete</m
浏览 12提问于2020-09-02得票数 0
2回答
例如，我有一个来自服务的名为totalQuantity的变量。
我有一个子组件，如果用户已登录，则只初始化变量。
这是子组件。
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { CartService } from '../cart';
@Component({
selector: 'landing',
templateUrl: './landing.component.html'
})
expo
浏览 2提问于2017-01-13得票数 1
回答已采纳
我无法想象这有多难，但是我在任何地方都找不到关于如何使用Jasmine为具有@Input绑定的组件编写简单单元测试的文档。
我有一个基本组件，如下所示：
import { Component, Input } from '@angular/core';
@Component({
selector: 'action-button',
templateUrl: './action-button.component.html',
styleUrls: ['./action-button.component.scss'],
浏览 18提问于2021-05-25得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
