首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在angular中ngStyle总是选择else大小写

在Angular中,ngStyle是一个内置的指令,用于根据条件动态设置元素的样式。当我们使用ngStyle时,选择使用else大小写的主要原因有以下几点:

  1. 语法一致性:在Angular中,建议采用小写的else关键字来表示条件的否定部分。这是为了保持代码的一致性和可读性,遵循Angular的代码风格指南。
  2. 与ngIf指令一致:在Angular中,ngIf指令也使用小写的else关键字来表示条件的否定部分。使用相同的关键字可以让代码更加统一和易于理解。
  3. 避免冲突:在某些情况下,如果在ngStyle中使用大写的ELSE,可能会与Angular的其他指令或关键字产生冲突,导致代码出现错误或无法正常工作。为了避免潜在的冲突,建议使用小写的else关键字。

总结起来,选择使用else的小写形式是为了保持代码的一致性、可读性,并避免潜在的冲突。在Angular中,使用ngStyle时,应该始终选择else的小写形式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何优雅的SpringBoot编写选择分支,而不是大量if else

一、需求背景 部门通常指的是一个组织或企业组成的若干人员,他们共同从事某一特定工作,完成共同的任务和目标。...组织或企业,部门通常是按照职能、工作性质或业务范畴等因素进行划分的,如财务部门、人力资源部门、市场部门等。...但在开发过程,如果不建立数据表,则需要用选择结构进行判断赋值,所以就产生了大量的 if-else 代码。 本文的目标,就是消除这些 if-else 代码,用更高级的方法来实现!...三、基础工作 同学们创建完成项目之后, cn.zwz.entity 新建一个 User 员工类,如下图所示。 员工类定义 部门编号 和 姓名 两个字段,代码如下。...同学们开发自己的商业订单时,可以采取这个方案来处理大量的选择逻辑。

21720
  • Angular教程】-组件初识|8月更文挑战

    组件相关的其他文件暂时先放一放,Vue开发的时候我们创建好的组件总是要挂载后才能使用的,那angular需要挂载吗?...fontSizePx属性被传入到sizer组件 操作sizer组件后又将size更新到了app的fontSizePx属性,页面随之更新 结构型指令 NgIf(内置): 给组件ts添加属性: public...html模板绑定的时候可以通过变量来选择性的开启和关闭部分样式 绑定一组...class试试 NgStyle 组件html模板绑定一组style试试 <div [ngStyle]="{ 'background-color': 'chocolate', width...,要不然功能无法实现 此时页面恢复正常,通过输入框更新内容,页面绑定的数据同时更新 管道 angular的管道与Vue的过滤器雷同,均可以使数据按指定的格式进行显示,同样使用管道符来操作 内置管道

    1.9K20

    应用开发,我为什么选择 Flutter 而不是 React Native ?

    为什么我更倾向于 Flutter 一段时间以来,React Native 一直是全球领先的跨平台开发框架。而且 Flutter 出现之前,React Native 可谓无可匹敌。...开发高性能应用 应用性能方面,Flutter 同样明显领先于 React Native。几乎所有性能测试,Flutter 的性能都比 React Native 更好。...例如,使用 Flutter 时,应用动画的运行速率可以达到每秒 60 帧。 对于混合应用开发,将代码、原生组件以及库集成至新架构时,React Native 会带来更高的复杂性。...React Native 官方文档并不提供任何明确的支持或定义步骤,导致开发者找不到得到广泛认可的发布流程自动化指南。...如何选择,请各位斟酌。关注公众号 逆锋起笔,回复 pdf,下载你需要的各种学习资料。

    3.3K20

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

    事件绑定((event)) 到目前为止,您所遇到的绑定指令可以一个方向上流动数据:从一个组件到一个元素。 用户不只是盯着屏幕。 他们输入框输入文字。 他们从列表中选择项目。 他们点击按钮。...Angular你不需要这些指令。 通常,您可以使用功能更强大,表现力更强的Angular绑定系统获得相同的结果。 当你可以写一个简单的绑定时为什么要创建一个指令来处理点击呢?... 要同时设置多个内联样式,NgStyle指令可能是更好的选择。 尝试绑定ngStyle到一个key:value控制Map。 对象的每个键都是一个样式名称;它的值是适合那种样式。...为什么你只能应用一个结构指令到一个元素。 本节介绍常见的结构指令: NgIf:有条件地从DOM添加或删除元素。 NgFor:为列表的每个项目重复一个模板。...想象一下,诸如a.b.c.d这样的长属性路径的某个地方防止空值。 Angular安全导航操作符(?.)是一种更为流畅和方便的方法来防止属性路径中出现空。表达式达到第一个空值时会被释放。

    30K20

    angular入门教程_初学者织围巾简单教程慢动作

    课程内容 Angular 初学者快速上手教程导读 课程特色 你可能会问:Angular 的文章到处有,网上一大片,我为什么要来读你这个系列文章? 这是非常好的一个问题,说明你对阅读内容有质量要求。...第2-1课:组件:概述 几乎所有前端框架都在玩“组件化”,而且最近都不约而同地选择了“标签化”这种思路,Angular 也不例外。...模板内的局部变量 属性绑定、事件绑定、双向绑定 模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 模板里面使用属性型指令 NgClass、NgStyle、NgModel 模板里面使用管道格式化数据...以上就是为什么大多数模板引擎都要强调“轻逻辑”的最根本原因。 对于 Angular 来说,强调“轻逻辑”还有另一个原因:组件的整个生命周期里面,模板函数会被执行很多次。...如果真的出现了重名,Angular 会按照以下优先级来进行处理: 模板局部变量 > 指令的同名变量 > 组件的同名属性。

    3.3K20

    Angular2 之 结构型指令几个概念

    NgStyle可以修改元素的好几个样式。 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局。...它仍然附加子啊它所属于的DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然进行!它还是占用着那么多的资源。...angular会从DOM移除该元素,停止相关组件的变更检测,把它从DOM事件移除,并且销毁组件。组件会被垃圾回收,并释放内存。...控制Template标签内DOM添加与显示,模板级别使用的。 Angular应用之外,标签的默认CSS属性display是none 。 它的内容存在于一个隐藏的文档片段。...,Angular的控制下,DOM的效果是不同的。 ?

    3K20

    ionic3应该善用组件和指令

    angular4提供了很多功能强大的内置指令,但在现实情况,这些内置指令可能还不能完全满足实际要求,这时我们就需要编写自定义指令来实现特定要求。...angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊的指令,但已经有一定目的明显区分开来,分别用Directive和Component...往往很多人会封装组件,但不会去封装指令,而选择用Provider或者Pipe(管道,相当于angular1时的过滤器filter),甚至样式来实现,虽说这也能解决部分问题,但不是最优的,Directive...Directive——指令 三种分类: 属性指令 属性指令指的是以属性形式使用的指令,如ngModel、ngClass、ngStyle等。 结构指令 结构指令,用于修改DOM结构。...构造函数constructor加上一句,赋值默认颜色: import { Directive, Input, ElementRef } from '@angular/core'; @Directive

    3.5K40

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库的FormGroup, FormControl,FormArray...,FormBuilder 等类构建出的数据对象就是响应式的表单,响应式的表单,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle 6.属性型指令 6.1

    2.8K50

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

    selector:选择器,当我们页面上添加了这个选择器指定的标签()后,就会在当前使用位置上创建并插入这个组件的一个实例 templateUrl...4.1.2、模板绑定语法 angular 应用,组件扮演着控制器或是视图模型的作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础的 angular 模板文件 在这个模板文件...:用来设置元素的多个内联样式,如果只设置一个内联样式,应该使用模板绑定语法的样式绑定 NgStyle 属性指令 import { Component...NgSwitch:根据条件切换,从候选的几个元素中选择匹配的,放到 dom 元素选择配置 <option value...组件中使用服务 需要使用的组件引入服务,然后组件的构造函数通过依赖注入的方式注入这个服务,就可以组件完成对于这个服务的使用 父组件对数据进行赋值,然后调用服务的方法改变数据信息

    15.8K30

    AngularDart 4.0 高级-结构指令 顶

    . - 模板语法指南中进行了描述,并在整个Angular文档的示例中进行了介绍。 以下是模板的示例: <div *ngIf="hero !...<em>在</em>应用结构指令之前,您可能想暂停一下,以考虑添加和删除元素以及创建和销毁组件的后果。 星号(*)前缀 当然,你注意到了指令名称的星号(*)前缀,并想知道<em>为什么</em>它是必要的以及它做了什么。...您可以<em>在</em>分配给ngFor的字符串<em>中</em>启用这些功能,这是您在<em>Angular</em>的microsyntax<em>中</em>编写的。...满足<em>Angular</em>模板<em>中</em>的类似需求。 编写一个结构指令 <em>在</em>本节<em>中</em>,您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf<em>在</em>条件为true时显示模板内容。...括号定义了一个CSS属性<em>选择</em>器。 指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于<em>Angular</em>。 <em>选择</em>适合您或您公司的简短内容。

    16.1K20

    AngularDart4.0 高级-属性(Attribute)指令 顶

    “结构指令”页面中了解它们。 属性指令被用作元素的属性。 例如,“模板语法”页面的内置NgStyle指令可以同时更改多个元素样式。 属性指令有两种: 基于类:一个全功能的属性指令,使用类实现。...属性的CSS选择器是方括号的属性名称。这里指令的选择器是[myHighlight]。 Angular定位模板具有名为myHighlight的属性的所有元素。...为什么不叫它“highlight”? 虽然highlight是比myHighlight更简洁的名字,并会工作,最佳做法是为选择器名称加上前缀,以确保它们不与标准HTML属性发生冲突。... 现在在AppComponent引用此模板,并将Highlight指令添加到指令列表。 当Angular模板遇到myHighlight时,就会识别该指令。...本节,您将把AppComponent转换为一个线束,让您用单选按钮选取高亮颜色,并将您的颜色选择绑定到指令。

    3.2K10
    领券