将函数作为条件传入[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

相关·内容

基于python 将列表作为参数传入函数时的测试与理解

将一个列表传入函数后，会对这个列表本身产生什么改变？这就是本文主要考察的内容。...试试下面的代码 print(list) # 输出结果为： # [3, 4, 5, 6, 7] # 可见，执行temp.pop函数后，list原本的值也受到了改变。...b(list) print(list[0]) # 最终输出： # 3 # 13 # list在b函数内的经过temp2运作后，改变的是list本身的值 # 所以，将某个列表（比如这里的list）作为参数传入某个函数...补充知识：python 字典怎样当作参数传入函数里，以及在函数里的一些遍历。变量的作用域。...当然如果你想在局部改全局变量的话，你可以先声明这个变量是全局变量globle，然后在进行更改以上这篇基于python 将列表作为参数传入函数时的测试与理解就是小编分享给大家的全部内容了，希望能给大家一个参考

3.7K2 0

Angular 6.x 基础教程

在调用我们的事件处理函数时，会自动帮我们处理调用的参数。...Inject(MailService) private mailService) {} } 不过对于 Type 类型(函数类型) 的对象，我们一般使用 constructor(private mailService...第九节 - 使用 Output 装饰器 Output 装饰器的作用是用来实现子组件将信息，通过事件的形式通知到父级组件。...用过 AngularJS 1.x 的同学，对 ng-class 应该很熟悉，通过它我们能够根据条件，为元素动态的添加或移除对应的样式。在 Angular 中，对应的指令是 ngClass 。...and round corners 除了 ngClass 指令外，Angular 还为我们提供了 ngStyle 指令。

15.6K2 0

NG2.4.10升级NG4正式版：修正AOT打包报错的一些问题

[ngClass]="{ 'has-danger': form.controls.RuleContent.controls.FenceName.invalid && form.controls.RuleContent.controls.FenceName.value...form.controls.RuleContent.controls.FenceName.valid && form.controls.RuleContent.controls.FenceName.value }" // v4的支持且AOT不报错的 [ngClass...：Supplied parameters do not match any signature of call target 这个问题的原因所在，就是平时代码不严谨造成的；比如你在html声明了一个函数...复制代码 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';...$event，你这对应的函数没有传入对应的形参 // 空参就会报这个错误，因为之前觉得这只是作为关闭操作，传回去是个null，就不传了 // so。。

4111 0

todoMVC_mvc框架是什么

, title: string, done: boolean }[] = JSON.parse( window.localStorage.getItem('todos') || '[]'); // 该函数是一个特殊的...angular生命周期钩子函数 // 它会在angular应用初始话的时候执行一次 ngOnInit() { window.onhashchange = () => { this.hashChangeHandler...() // 当用户点击了锚点的时候，我们需要获取当前的锚点标识 // 然后动态的将根组件visibility设置为当前点击的锚点标识 //注意 bind ,不然的话this就变成window了 window.onhashchange...= this.hashChangeHandler.bind(this) } } // 当angular组件数据发生改变的时候，ngDoCheck钩子被触发 // 在钩子函数中持久化数据 ngDoCheck...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

7811 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

---- 基础概念国内的官网--基础词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法，相当于一本小字典关于ng2的一堆为什么:... 复制代码 main.ts // 引入生产模式，控制关闭开发模式的，函数来的 import { enableProdMode } from '@angular...[不完全等同于js条件表达式]或者方法亦或者变量， (click)="": 事件绑定[视图触发改变数据源]，同上，支持表达式和方法。。...b : 会判断item是否有a这个值，防止undefined或者null让视图渲染报错 ---- 最最最常用的内置指令样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象...其他的一丢丢废话：若是学会了ng2技术栈，其实你过程接触了Typescript，Rxjs，es6&7等

6.2K2 0

Angular: 最佳实践

本文将分为几个章节来讲解，这些章节根据应用核心需求和生命周期来拆分。现在，我们开始吧！...这很有用，因为当服务端提供一个 User 实例数据给你，它只能返回字符串类型的时间给你，但是你可能有一个 datepicker 控件，它将日期作为有效的 JS Date 对象返回，并且为了避免数据被误解...将简单的 HTTP 服务逻辑放在基类中，并从中派生 API 服务。...这是因为除了检查直接的条件语句之外，任何逻辑都应该写在组件的类方法中，而不是写在模版中。...在模版中写 *ngIf=”someVariable === 1” 是可以的，其他很长的判断条件就不应该出现在模版中。

2.8K4 0

【Angular教程】-组件初识｜8月更文挑战

前提: 准备一个空的angular项目(ng new angular-course) 与Angular组件的第一次会面 **通过创建组件命令: ****ng g c components/HelloWorld...img [src]="imgUrl" alt=""> 看一下我们的页面吧绑定事件语法示例: 触发一下在组件的ts文件中新增print函数...{ console.log('[ print ] >>', 'hello world', '事件类型: ' + event.type); } 在组件的html模板中添加一个按钮来触发print函数...app-sizer> Resizable Text 通过演示可以看得出 app中的fontSizePx属性被传入到...: "yyyy‐MM‐dd HH:mm:ss" }} 将字符串全部转为小写 LowerCasePipe: {{ value | lowercase }} 将字符串全部转为大写

1.9K2 0

ionic3应该善用组件和指令

其实就是模版指令，如ngIf，当条件为true时，该元素会被添加到DOM中。其主要依赖TemplateRef和ViewContainerRef来完成操作。...TemplateRef用来访问组件的模板，而ViewContainerRef可作为视图内容渲染器，将模板内容插入至DOM中。组件这个不必说了，我们用得最多的便是组件。...自定义属性指令实例：创建一个bgColor属性指令，支持传入颜色名参数，设置目标标签的背景色 1）创建指令。...在构造函数constructor加上一句，赋值默认颜色： import { Directive, Input, ElementRef } from '@angular/core'; @Directive...为实现该指令，要借用TemplateRef和ViewContainerRef，TemplateRef用来访问组件的模板，而ViewContainerRef可作为视图内容渲染器，将模板内容插入至DOM中。

3.5K4 0

Angular 2.x折腾记：(2)初步认识angular2，不一样的开发模式

main.ts // 引入生产模式，控制关闭开发模式的，函数来的 import { enableProdMode } from '@angular...{{title}} app.component.spec.ts: 测试用例，够繁琐，以后再说 app.components.ts：组件逻辑处理 // 导入装饰器：装饰器可以理解为一些函数的封装...[不完全等同于js条件表达式]或者方法亦或者变量， (click)="": 事件绑定[视图触发改变数据源]，同上，支持表达式和方,特殊之处后面解释。...绑定赋值的条件表达式的特殊之处：不支持：赋值 (=, +=, -=, ...)...b : 会判断item是否有a这个值，防止undefined或者null让视图渲染报错最常用的内置指令样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象，用来动态判断增加多个样式

1051 0

Angular学习笔记（一）

Angular 模块都是一个带有 @NgModule 装饰器的类。 NgModule 是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。...指令 Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。服务服务是一个广义范畴，包括：值、函数，或应用所需的特性。...指令的 property 内置属性型指令 NgClass - 添加或移除一组CSS类 NgStyle - 添加或移除一组CSS样式 NgModel - 双向绑定到HTML表单元素...内置结构型指令 NgIf - 根据条件把一个元素添加到DOM中或从DOM移除 NgSwitch - 一组指令，用于切换一组视图 NgFor - 对列表中的每个条目重复套用同一个模板模板引用变量 #

3.3K2 0

AngularDart4.0 指南- 模板语法一顶

模板表达式不能引用静态属性，也不能引用顶层变量或函数，如来自dart：html的window 或document 。他们不能直接调用从dart:math导入的print或函数。...模板语句不能引用类的静态属性，也不能引用顶层变量或函数，如来自dart:html的window或document 。它们不能直接调用从dart:math导入的print或函数。...元素属性(property)可能是更常见的目标，但Angular首先查看名称是否是已知指令的属性(property)，如下例所示： [ngClass]...一次性字符串初始化满足以下所有条件时，省略括号：目标属性接受一个字符串值。该字符串是一个固定的值，您可以拷贝到模板中。这个初始值永远不会改变。...以下示例将HeroDetailComponent的prefix属性初始化为固定字符串，而不是模板表达式。 Angular设置它并不再管它。

5.2K1 0

【玩转腾讯云】手把手教你使用VueReactAngular三大框架开发Pagination分页组件

（FP，Functional Programming），每个React组件都是一个函数，HTML/CSS/JavaScript都在函数里面，在函数里面返回模板内容。...1) 通过props传入数据原本我打算直接将lists的值放到props中，通过外部传进来，如下： <li v-for="list in lists" :key...props参数传入，这里将props进行了对象解构，直接取到了dataSource字段。...6.3.2 第1步：首/尾页翻页逻辑增加首尾页显示条件、高亮条件和翻页功能。...框架从外向内通讯从内向外通讯编程范式列表渲染条件渲染事件绑定内部状态插槽定义方式计算属性监听外部传入的参数变量 Vue props $emit() 响应式 v-for指令 v-if指令

7.8K0 0

AngularDart4.0 指南- 模板语法二顶

以下示例有条件地将字体大小设置为“em”和“％”单位。 <button [style.font-size.em]="isSpecial ?...isUnchanged, 'special': isSpecial }; } 将ngClass属性绑定添加到currentClasses，相应地设置元素的类： <div [ngClass]=...它可以根据切换条件从几个可能的元素中显示一个元素。 Angular只把选中的元素放入DOM中。...例如，您可以将数字显示为货币，强制文本为大写，或筛选列表并对其进行排序。对于这些小型转换来说，Angular 管道是一个很好的选择。管道是简单的函数，它接受一个输入值并返回一个转换后的值。...使用管道运算符（|），它们很容易在模板表达式中应用： Title through uppercase pipe: {{title | uppercase}} 管道运算符将左边表达式的结果传递给右边的管道函数

30K2 0

Angular 2 + 折腾记：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点

首先需要操作表单的模块引入这两个模块； import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应的几种状态..."> 您输入的值有误，请重新输入提交复制代码有两种方式处理来对上面的表单做校验；在Submit()函数内... <div class="form-group" [ngClass...} from '@angular/router'; import { AccountService } from '../.....1[3,4,5,7,8,9]\\d{9}') || Validators.pattern('[\\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.

3.8K2 0

AngularDart4.0 指南- 表单顶

您可以创造性地设计控件，将它们绑定到数据，指定验证规则和显示验证错误，有条件地启用或禁用特定控件，触发内置的视觉反馈等等。 Angular通过许多重复的，模板化的任务使处理过程变得简单。...顺便说一句，您可以注入数据服务来获取和保存真实数据，或者将这些属性作为输入和输出（请参阅“模板语法”页面中的输入和输出属性）来绑定到父组件。这不是现在的问题，这些未来的变化不会影响表单。...使用name和类绑定来有条件地分配适当的表单有效性类。临时将另一个名为spy的模板引用变量添加到Name 标记，并使用它显示输入的CSS类。...作为类绑定的替代方法，可以使用NgClass指令来设置控件的样式。...作为一种视觉效果，您可以隐藏数据输入区域并显示其他内容。将表单封装在中，并将其hidden属性绑定到HeroFormComponent.submitted属性。

17.5K3 0

Angular 中的数据绑定

原文链接：Data Binding in Angular - 原文作者 Amit Dhiman 本文采用意译的方式插值绑定: 将动态的值插入到模版内容中，我们使用 {{}} 符属性（Property...，为 HTML 元素动态添加或者移除 CSS 类名，我们分别使用 [class.class-name]="condition" 或 [ngClass]="{ 'class-name': condition...两者在 Angular 应用中都很重要，我们根据使用场景来选择使用。事件绑定事件绑定允许我们将事件（比如按键、点击、悬停、触摸等）绑定到数组中的一个方法。它是从视图到组件的单向绑定。...} value = "" handleInput(event){ this.value = (event.target as HTMLInputElement).value; } 将模板引用变量传递给函数...click)="clearValue()">Clear value = "" clearValue(){ this.value = ""; } 译者加：开篇总结的 1-7

1981 0

Angular 组件样式

ngClass 通常情况下，要为某个元素添加指定样式，我们可以直接这样做：提交但某些时候我们需要根据不同的条件，为指定元素应用不同的样式...传递给 ngClass 指令的表达式的数据类型可以是：对象、数组或字符串。...接下来让我们来分别看一下具体的使用示例：传递样式数组提交 Angular 将会接收传递给 ngClass...选择器也可以结合其它的选择器，比如： /* let's add another style to app.conmponent.css */ :host h2 { color: red; } 以上样式在运行时，将生成以下样式...:: ng-deep 伪类选择器 :host ::ng-deep h2 { color: red; } 以上样式在运行时，将生成以下样式： [_nghost-c0] h2 { color

2K3 0

Angular 从入坑到挖坑 - 组件食用指南

，模板表达式只作为属性或方法的调用快速执行：模板表达式得出的数据应该快速结束，否则就会对于用户体验造成影响没有可见的副作用：模板表达式只作为数据的展示，不应该改变任何的数据；应该构建出幂等的表达式，...：用来设置元素的多个 css 类属性，如果只设置一个 css 类，应该使用模板绑定语法中 class 类绑定 NgClass 属性指令 import...="">请选择 AMD Ryzen 7 3700X <option value="i5-9400f"...，添加了三个特殊的运算符管道运算符管道是一种特殊的函数，可以把运算符（|）左边的数据转换成期望呈现给视图的数据格式，例如，将时间进行格式化、将数据转换成 json 字符串的形式等等可以针对一个数据使用多个管道进行串联...五、组件的生命周期钩子函数当 angular 在创建、更新、销毁组件时都会触发组件的生命周期钩子函数，通过在组件中实现这些生命周期函数，从而介入到这些关键时刻钩子函数触发时机 ngOnChanges

15.8K3 0

ng 核心模块

指定一个context给这个函数是可选的，context将作为iterator函数的this。 angular.extend 扩展目标对象dst，使用从src对象复制可枚举属性到dst。...注意：记住angular.extend不支持递归合并（深度copy）。 angular.noop 这个函数不执行任何的操作。这个函数可以用于当需要一个函数风格的代码时。...angular.bind 返回一个函数fn，绑定了self参数为这个函数的this。你可以再传递一个args参数预先绑定到这个函数上。这个特性也称为局部应用，区别与函数柯里化。...使用Angular标记类似于{{hash}}在一个href属性中，如果点击的时机早于Angular替换{{hash}}标记将导致连接到错误的URL。...直到Angular替换这个标签前这个连接将失败，最可能返回404错误。这个ngHref指令解决这个问题。

1.2K1 0

AngularDart 4.0 高级-结构指令顶

当条件为false时，NgIf从DOM中删除它的宿主元素，将它从DOM事件（它所依附的）中分离出来，将组件从Angular变化检测中分离出来并销毁它。组件和DOM节点可以被垃圾收集并释放内存。...每个宿主元素一个结构指令有一天你会想重复一段HTML，但只有当特定条件成立时才会重复。您将尝试将*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。...你在指令构造函数中注入这两个类作为类的私有变量。..._viewContainer); myUnless属性指令消费者期望将真/假条件绑定到[myUnless]。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号（*）语法解析为。 NgIf，NgFor和NgSwitch内置指令如何工作。

16.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云