有没有更有效的方法来使用*ngIf条件
ngIf是Angular框架中的一个指令，用于根据条件来显示或隐藏DOM元素。除了使用ngIf指令外，还有其他一些方法可以实现类似的功能。
- 使用[hidden]属性：可以通过设置元素的[hidden]属性来根据条件隐藏或显示元素。例如，可以使用[hidden]="condition"来根据条件来隐藏或显示元素，其中condition是一个布尔值。
- 使用ngSwitch指令：ngSwitch指令可以根据条件来选择显示不同的DOM元素。可以使用ngSwitchCase来定义不同的条件，并使用ngSwitchDefault来定义默认情况下的DOM元素。
- 使用ngIfElse指令：ngIfElse指令可以在条件不满足时显示一个备用的DOM元素。可以使用ng-template来定义备用的DOM元素，并在ngIf指令中使用ngIfElse来指定备用的DOM元素。
- 使用ng-container元素：ng-container元素可以用作一个容器，可以在其中使用*ngIf指令来根据条件显示或隐藏DOM元素。ng-container元素本身不会被渲染到DOM中，因此可以用来包裹需要条件显示的DOM元素。
这些方法都可以根据具体的需求来选择使用，根据实际情况来决定使用哪种方法更合适。在使用这些方法时，需要注意条件的判断逻辑和DOM元素的结构，以确保实现预期的效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云原生应用引擎TKE：https://cloud.tencent.com/product/tke
- 云数据库CDB：https://cloud.tencent.com/product/cdb
- 云存储COS：https://cloud.tencent.com/product/cos
- 人工智能AI：https://cloud.tencent.com/product/ai
- 物联网IoT Hub：https://cloud.tencent.com/product/iothub
- 移动开发MPS：https://cloud.tencent.com/product/mps
- 区块链BCS：https://cloud.tencent.com/product/bcs
- 元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
有没有更有效的方法来使用*ngIf条件
angular、angular2-template
我有yes/no单选按钮，用于读取存储在JSON对象中的值。首先，我检查json对象是否为空，或者单选按钮的字段是否为null。在这种情况下，我将显示两个未选中的单选按钮。接下来，我将检查json对象中的字段是否显示为true值，如果是，则选中yes单选按钮，然后同样检查false值并选中no单选按钮。似乎我在视图中使用了很多相同或相似的代码，我想知道是否有更有效的方法来做到这一点。下面是我的代码。谢谢。
浏览 0提问于2017-02-13得票数 0
4回答
值为0时，未使用ngIf排除大小写定义HTML检查变量
angular、angular2-template、angular2-directives
我正在使用Angular 2，并希望使用htm *ngIf条件检查变量值是否为undefined。下面的工作是有效的，但这是两个检查：
<span *ngIf="!testvar && testvarl !
浏览 0提问于2017-08-23得票数 29
1回答
有条件地添加指令
angular
我想有条件地向组件添加一个指令(其中au-disabled、au-accented和au-focused是指令)： <au-placeholder>上面的方法是有效的(对我来说也是可以接受的)，因为(在我的例子中)条件属性disabled、accented和focused是相互排斥的--我
浏览 0提问于2016-08-03得票数 12
3回答
滤光角计数
angular、ngfor
在没有嵌套ngFor的ngIf中，是否有更简单的方法来获取实际显示结果的计数？<div *ngFor="let stuff of things"> **I'd like aneasier way to get the result of this *ngIf</em
浏览 11提问于2022-04-25得票数 2
回答已采纳
1回答
在Angular 6中动态调用索引组件
javascript、angular、angular-components、angular6
我在不同的组件中创建了我的应用程序的不同布局，我正在使用*ngIf条件访问它，如下所示<app-layout2*ngIf="selected==2"></app-layout2>
<app-layout3 *ngIf=&quo
浏览 0提问于2018-06-07得票数 0
2回答
*NgIf中未定义且为Null
angular、angular-ng-if
*Ngif是否对null、undefined和""<empty string> value进行了类似处理？例如，是这样的：*ngIf = "foo == null" 处理方式与：*ngIf = "foo == undefined" 如果不是，有没有一种更简单的方法来使用*ngIf来不显示值为null、undefined和"“的<
浏览 24提问于2020-07-22得票数 0
回答已采纳
1回答
Angular 4+有序或通用验证消息
angular、validation、angular-reactive-forms
我使用反应式表单验证，并且每个输入域都有一些条件。我不想一次显示所有错误，我正在寻找一种很好的方法来实现这一点。目前，我的代码如下所示： *ngIf="stbForm.get('firstName').invalid && (stbForm.get('firstName').dirty || stbForm.get('f
浏览 0提问于2018-04-16得票数 0
1回答
Angular2路由器-有条件隐藏链接
angular、angular2-routing
有办法在Angular2中有条件地隐藏路由器链路吗？在我的组件上，我使用@CanActivate装饰器来确定是否可以激活路由，但这并不隐藏链接本身。@CanActivate(() => hasValidToken())
我可以在*ngIf方法中使用hasValidToken()结构指令(该方法返回布尔值)，但这看起来很麻烦，而且有点脏。<li><a [routerLink]="['RegisterUser']" *ngIf=
浏览 2提问于2016-03-04得票数 3
回答已采纳
2回答
在像React这样的Angular中，有没有一种干净的方法来实现组件的条件可见性？
javascript、reactjs、angular、conditional-statements、angular-ng-if
<Avatar /> : <SignInButton /><ng-container *ngIf="user$ | async as loggedIn; else signInButtonTemplate">
<application
浏览 3提问于2021-11-01得票数 0
3回答
如何避免模板中的多个条件(ngIf)？
angular
在某些情况下，我在模板中有很多条件，例如，我在ngIf中有很多条件。如何减少条件，最好使用一个条件来显示div，或者使用某种方法来处理条件和隐藏/显示元素。
<div (click)="createMessage()" class="message" *ngIf="array.length && message.queue &
浏览 7提问于2016-09-29得票数 1
回答已采纳
2回答
我正在使用一个具有输入属性的子组件。子组件不实现ngOnChanges。我想从父级更新组件。做这件事最好的方法是什么？我已经了解了如何使用ngIf并重新呈现组件。有没有更干净的方法？<child [inputprop]="input" ngIf="render"&
浏览 0提问于2021-03-22得票数 0
1回答
具有多个可比(OR)条件的ngIf不工作
angular
我在设置一个多条件的ngIf时遇到了麻烦。当嵌套<ng-container>时，每个条件都有一个条件，但当我只使用一个包含所有条件的容器时，它就不起作用了。代码：<ng-container *ngIf=" <ng-container *
浏览 3提问于2019-11-27得票数 1
回答已采纳
4回答
有没有更清晰有效的方法来重写这个函数？
php、mysql
我正在尝试以不同的方式重写下面的函数，但似乎我遗漏了一些东西，我没有得到预期的功能？提前谢谢。true : false;重写的函数1 $email=mysql_real_escape_string($email);
浏览 0提问于2012-03-31得票数 0
回答已采纳
1回答
使用Angular2 DevExtreme显示和隐藏表单元素
html、angular、devexpress、devextreme
我试图使用Angular的*ngIf显示和隐藏一个表单域，但是，当我这样做时，无论我给*ngIf多少值，整个表单都不会呈现，也不会抛出任何错误。显然，*ngIf不是解决问题的方法。有没有一种更DevExtreme的方法来做到这一点？我在文档中看到了一个visible，但我并不只是想隐藏它。dxi-validation-rule type="required" message="Name
浏览 0提问于2017-03-31得票数 2
1回答
更好、更有效地以角度反应形式显示错误消息，而无需使用多个*ngIf
angular-validation
我已经在我的表单中使用@rxweb包使用reactive form validation验证了我的表单，如果我引用了一个与其相关的问题，但我找不到正确的解决方案，我希望显示错误消息而不重复* not="firstname"/> userForm.controls.firstname
浏览 6提问于2019-01-08得票数 0
1回答
javascript -检查对象是否具有子属性
javascript
假设像这样的对象 b: { { }, f: 'bye'} }我想检查一下e是否有效。目前我正在使用多个if条件，比如
if (typeof a !== 'undefined' && typeof a.b !== 'undefined' && typeof
浏览 2提问于2014-07-10得票数 1
2回答
angular2条件ng-模板与条件div
angular、angular2-template、ng-template
我正在试图找出Angular2的结构指令，目前，我找不到条件div和条件ng-template之间的区别。从技术上讲，这个代码： <other-component></other-component>将对此代码执行相同的任务：
<ng-template[ngIf]="true">
浏览 1提问于2018-07-16得票数 2
回答已采纳
1回答
如何测试一个变量是否不等于很多变量？
angular
我想知道有没有更简单的方法来写这个？因为代码变得太长了： <div *ngIf="value.data != '17' || value.data != '18' || value.data != '20'"</div> 有没有一种方法可以缩写而不写那么多次|| value.data =！...？ 谢谢你！
浏览 11提问于2021-09-10得票数 0
回答已采纳
2回答
有没有办法引用*ngIf中的当前模板
angular、angular-ng-if
所以正常的ngIf看起来像这样我的condition很复杂，因为我想要在条件满足时创建secondTemplate该条件是这样的，我不能使用!condition并使其工作，我必须使用不带condition的条件。那么<
浏览 0提问于2021-03-17得票数 0
1回答
我在角9中有下面的模板代码块，有一个条件可以显示视图(眼睛)图标或编辑(铅笔)图标。正如您所看到的，许多HTML是相同的，只有少数属性和单击绑定不同。 <i class="far fa-eye" aria-hidden="true" title="View"></i>&
浏览 2提问于2020-07-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
