将函数作为条件传入[ngClass] - Angular 7
将函数作为条件传入[ngClass]是Angular 7中的一个特性，它允许我们根据函数的返回值来动态地添加或移除CSS类。
在Angular中，[ngClass]是一个指令，用于动态设置元素的CSS类。通常情况下，我们可以直接将一个字符串或字符串数组传递给[ngClass]，来指定要添加的CSS类。但是，我们也可以将一个函数作为条件传递给[ngClass]，根据函数的返回值来决定是否添加某个CSS类。
具体实现时，我们需要在组件中定义一个函数，该函数的返回值决定了是否添加某个CSS类。然后，我们可以将该函数作为条件传递给[ngClass]，并在模板中使用它。
以下是一个示例：
在组件中定义一个函数：
// 在组件中定义一个函数，根据条件返回一个布尔值
isHighlighted(): boolean {
// 根据某个条件判断是否需要添加highlight类
return this.someCondition;
}在模板中使用该函数：
<!-- 使用函数作为条件传入[ngClass]，根据函数的返回值来决定是否添加highlight类 -->
<div [ngClass]="{'highlight': isHighlighted()}">Some content</div>在上述示例中，我们定义了一个名为isHighlighted的函数，根据某个条件判断是否需要添加highlight类。然后，我们将该函数作为条件传递给[ngClass]，并在模板中使用它来决定是否添加highlight类。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数计算（云函数）：https://cloud.tencent.com/product/scf
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云安全中心（SSC）：https://cloud.tencent.com/product/ssc
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网开发平台（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云腾讯元宇宙（Tencent Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
我想在我的[ngClass]条件中绑定一个函数的结果，但是它什么也没做。HTML <div [ngClass]="{hover': check(token.ids)}" *ngFor="let tokens of info.data"> 我试图从函数中返回一个布尔值，但什么也没有发生
浏览 23提问于2019-05-13得票数 0
回答已采纳
我正在用Angular构建一个web应用程序，并且一直在尝试使用ngClass指令动态更改类。然而，当更新指令的条件时，它并不总是起作用。我尝试在滚动时更新jQuery回调函数中的条件，但不起作用。然而，当我通过一个函数改变条件的值时，它就能工作了！我会给你下面的代码，这样你就可以理解我在说什么了。stickyNavbar}" (click)="test()">Test</button>
<&#
浏览 13提问于2019-09-01得票数 0
回答已采纳
Angular v8。我有一个使用ngClass指令的标记。该表达式调用一个函数。如何让ngClass在条件改变后重新计算该表达式？它似乎只被调用一次。标记驻留在ng-template元素中。例如：<div [ngClass]="{'primary-class' : 'isPrimary()'}">text</div>
<
浏览 1提问于2020-04-17得票数 0
我在我的新的Angular 11应用程序中遇到了以下错误。找不到任何语法错误。offset-xl-2"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-2 col-xl-2" [ngClass文件如下所示： export class DevMainHeaderComponent implements OnInit {
}
浏览 38提问于2021-02-08得票数 1
回答已采纳
-webkit-transform: translate(0, -50%); }
如果条件为真，我如何在css中实现一个类，以便将它与ngClass一起使用来显示这个css？
浏览 2提问于2019-08-01得票数 1
event)" [pokemon]="item" </app-pokemon>
浏览 68提问于2021-11-01得票数 0
回答已采纳
经过一些搜索，我发现将背景颜色属性应用于k-window类改变了弹出窗口的bg颜色，但我希望它基于一个条件而改变。我认为我们不能直接将类的定义添加到条件中，它只接受类的名称。<kendo-dialog [ngClass]="{'k-window{background-color:red}' : flag = true,'k-window{background-color:green
浏览 1提问于2021-03-04得票数 0
2回答
这是一个圆形菜单。在选项中通过触摸浮动按钮打开，但我得到：当我运行代码的时候。另外，当我加载这个页面时，菜单已经打开了。我希望当它被点击时，它是关闭的和打开的。 <a class="floating-btn" (click)="document.getElementById('circularMenu1').classList.toggle('active');&#
浏览 21提问于2020-05-17得票数 0
回答已采纳
2回答
toggleState3(firstIndex, secondIndex)">Button 3</a> 现在，我遇到的麻烦(我不能去工作，而且它看起来也很糟糕)是div box HTML，它现在看起来像： <div [ngClass
浏览 56提问于2020-08-21得票数 2
回答已采纳
1回答
我有一个列表，在左边显示一个插入符号图标，当它被点击时，它应该会改变图标。每当我点击一个图标时，所有的图标都会改变。 <div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
<i class="zmdi zmdi-caret-right" style=&#
浏览 28提问于2019-08-29得票数 1
回答已采纳
我尝试使用两个不同的网格列绑定到带有if-else条件的ng-class。我无法正确地做这件事。有人能指点我哪里做错了吗？谢谢。
浏览 28提问于2020-07-27得票数 0
2回答
我在玩ngClass，我不知道我做错了什么。它表现出了奇怪的行为。当我将一个函数赋值给ngClass时，它似乎不起作用，但是如果我给它分配一个对象文字，它就能工作。如何让ngClass使用组件的函数？ProposalForm.tsimport {NgClass} from 'angular2/co
浏览 2提问于2016-03-09得票数 3
回答已采纳
我想将一个条件传递给ngClass并对其求值，如下所示：当我运行代码时，ngClass将条件视为字符串，因此它不会对其求值，而只是将其作为字符串。
浏览 14提问于2018-09-07得票数 0
是否可以在ngClass中将条件语句和函数组合在一起 [ngClass]="tagType.tagColor ?'tags-button' : 'tags-button tag-colorless' && getStyleClasses()" 我在上面的语法上得到了一个错误，有没有一种正确的方法将条件语句和函数包含在一起该函数应在没有条件的情况下自行求值
浏览 15提问于2019-06-10得票数 0
回答已采纳
如何从JSON文件中检查如果数据类型为"Process“：false，那么相同的数据数组行应该是另一种颜色。请看我在component.ts文件中的代码。我从json文件中的行中按类型进行过滤。请指导如何从json文件中渲染如果process false，那么数据数组行应该是不同的颜色。 ngOnInit(): void { this.subscription = this.api.getRealTimeData().subscribe(data => {
this.loader.loade
浏览 6提问于2021-08-06得票数 0
回答已采纳
ngClass和类绑定有什么区别？[ngClass]="stringExp|arrayExp|objExp"有人能证实这一点吗？
浏览 0提问于2021-03-22得票数 1
因此，我在角度if语句方面有问题，我想写一个css代码行，以防if语句为false。有人能帮我吗？<div *ngIf="city.length < 16; else BigName">{{city}}</div> .desktopCityFilterName {
padd
浏览 4提问于2020-03-23得票数 1
回答已采纳
22回答
我的Angular代码出了什么问题？我收到以下错误： <li *ngClass="{active: step==='step1'}" (click)="step='step1'">Step1</li>
<li *ngClass="{active: step==='step
浏览 154提问于2016-02-08得票数 913
回答已采纳
在角1中，您可以向元素中添加一个CSS类，如动画显示和ng显示，但是对于角2的ngIf也不能这样做，因为元素在隐藏时根本不会呈现。.animate-show.ng-hide-add, .animate-show.ng-hide-remove, .animate-hide.ng- transition: all linear 0.2s;.animate-show.ng-hide-add-active,
.animate-show.ng-hide-remove-activ
浏览 1提问于2017-08-04得票数 0
1回答
我一直在浏览angular.io上的指南，并偶然发现了。在提供的示例中，ngClass的源是一个组件函数：<div [ngClass]="setClasses()">This div is saveable and special</div，并将在每个摘要周期内触发对函数的新评估，这是否会在摘要周期期间造成很大的开销？一个示例用例是在一个在可见页面上创建大约200个元素的ngClass上使用这个ngRe
浏览 4提问于2017-01-09得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
