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

Angular 8 ngStyle有时在循环内不起作用

Angular 8中的ngStyle指令用于动态设置HTML元素的样式。然而,在循环内使用ngStyle时,有时候可能会遇到它不起作用的情况。这可能是由于以下几个原因导致的:

  1. 语法错误:请确保ngStyle指令的语法正确。ngStyle的值应该是一个对象,其中键是CSS属性,值是对应的样式值。例如,[ngStyle]="{'color': 'red', 'font-size': '20px'}"
  2. 数据绑定问题:如果ngStyle的绑定数据发生了变化,但样式没有更新,可能是因为Angular的变更检测机制没有检测到变化。可以尝试使用ChangeDetectorRef手动触发变更检测,例如在组件中注入ChangeDetectorRef,并在数据变化后调用this.changeDetectorRef.detectChanges()
  3. CSS优先级问题:检查是否有其他CSS样式规则覆盖了ngStyle设置的样式。CSS样式规则的优先级是根据选择器的特殊性和位置来确定的。可以使用浏览器的开发者工具检查元素的应用样式,并确保ngStyle设置的样式具有足够的优先级。
  4. 循环内部作用域问题:如果ngStyle在循环内部使用,可能会遇到作用域问题。在循环内部,ngStyle的值可能会被覆盖或重写。为了解决这个问题,可以尝试使用ng-container元素来创建一个新的作用域,例如:
代码语言:txt
复制
<ng-container *ngFor="let item of items">
  <div [ngStyle]="item.style">...</div>
</ng-container>

在这个例子中,每个循环项都有一个名为style的属性,它包含应用于该项的样式对象。

对于Angular 8中ngStyle不起作用的问题,以上是一些可能的解决方案。如果问题仍然存在,可以进一步检查代码逻辑和调试,或者参考Angular官方文档和社区中的讨论。

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

相关·内容

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

    150 : 50" >Small 虽然这是设置单个样式的好方法,但是同时设置多个内联样式时,通常首选NgStyle指令。.../angular.dart'; const _minSize = 8; const _maxSize = _minSize * 5; @Component( selector: 'my-sizer'...字符串“let hero of heroes”是指: 取英雄列表中的每个英雄,将其存储本地英雄循环变量中,并使其可用于每次迭代的模板HTML。...绑定的目标是=的左边。 源位于=的右侧。 绑定的目标是绑定标点符号中的属性或事件:[],()或[()]。 源是引号(“”)或插值({{}})。...HeroDetailComponent.hero括号; 它是一个属性绑定的目标. HeroDetailComponent.deleteRequest括号; 它是事件绑定的目标。

    30K20

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

    所以,我推荐采用更加务实一点的方案,首先学会如何使用,等用熟了,有时间、有闲情的时候再去研究那些底层的原理。设计发动机很难,但是学会开车并不难,对吧?...模板的局部变量 属性绑定、事件绑定、双向绑定 模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 模板里面使用属性型指令 NgClass、NgStyle、NgModel 模板里面使用管道格式化数据...有两个办法: 加一层空的 div 标签 加一层 模板里面使用属性型指令 使用频率比较高的3个内置指令是:NgClass、NgStyle、NgModel。...使用案例代码: 用NgStyle批量修改内联样式!...'36px' : '12px' };} ngStyle 这种方式相当于代码里面写 CSS 样式,比较丑陋,违反了注意点分离的原则,而且将来不太好修改,非常不建议这样写。

    3.3K20

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

    doctype html> NgTestdemo <!.../core'; // 表单模块,比如你要在组件用到一些表单元素或者数据绑定,不然会报错 import { FormsModule } from '@angular/forms';..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件的值[单向,数据流向视图],指令,原生html控件的自身属性[value...,src,class,style]等,双引号支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量, (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式和方法。。...b : 会判断item是否有a这个值,防止undefined或者null让视图渲染报错 ---- 最最最常用的内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象

    6.2K20

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

    doctype html> NgTestdemo <!.../core'; // 表单模块,比如你要在组件用到一些表单元素或者数据绑定,不然会报错 import { FormsModule } from '@angular/forms';..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件的值[单向,数据流向视图],指令,原生html控件的自身属性[value...,src,class,style]等,双引号支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量, (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式和方,特殊之处后面解释...b : 会判断item是否有a这个值,防止undefined或者null让视图渲染报错 最常用的内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象,用来动态判断增加多个样式

    10510

    Angular2 之 结构型指令几个概念

    NgStyle可以修改元素的好几个样式。 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局。...它仍然附加子啊它所属于的DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然进行!它还是占用着那么多的资源。...总结 基于上面的利弊分析,无论是我们使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。...控制Template标签DOM添加与显示,模板级别使用的。 Angular应用之外,标签的默认CSS属性display是none 。 它的内容存在于一个隐藏的文档片段中。...,Angular的控制下,DOM的效果是不同的。 ?

    3K20

    ionic3应该善用组件和指令

    angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊的指令,但已经有一定目的明显区分开来,分别用Directive和Component...Directive——指令 三种分类: 属性指令 属性指令指的是以属性形式使用的指令,如ngModel、ngClass、ngStyle等。 结构指令 结构指令,用于修改DOM结构。...构造函数constructor加上一句,赋值默认颜色: import { Directive, Input, ElementRef } from '@angular/core'; @Directive...指令效果.png 5)指令扩展,支持事件操作 我们增加一个点击事件响应操作,点击时,循环切换背景色。...this.bgColor : this.defaultColor; this.setStyle(color); } } 效果图为:我懒得做gif,你想象一个点击循环切换背景色的按钮吧。

    3.5K40

    AngularDart4.0 指南-体系结构概述 顶

    您可以通过使用Angular的标记组合HTML 模板,编写组件类来管理这些模板,服务中添加应用程序逻辑以及模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。...Angular 库 ? Angular全体就像是Angular的库的集合。...Angular每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树的根到所有子组件。 ? 数据绑定在模板及其组件之间的通信中起着重要的作用。...它们倾向于以属性的形式出现在元素标签有时候以名称的形式出现,但更常见的是作为赋值或绑定的目标。 结构指令通过添加,删除和替换DOM中的元素来改变布局。...,ngSwitch)或修改DOM元素和组件的方面(例如ngStyle和ngClass)。

    7.9K30

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

    4.1.2、模板绑定语法 angular 应用中,组件扮演着控制器或是视图模型的作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础的 angular 模板文件 在这个模板文件中...:用来设置元素的多个内联样式,如果只设置一个内联样式,应该使用模板绑定语法中的样式绑定 NgStyle 属性指令 import { Component...以此为模板,循环渲染出所有的数据 {{i+1}} - {{item.name}} --- {{item.price...,会获取到条数据的索引值 当渲染的数据发生改变时 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过组件中添加一个方法,指定循环需要跟踪的属性值,此时当渲染的数据发生改变时...五、组件的生命周期钩子函数 当 angular 创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过组件中实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges

    15.8K30

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

    Angular的早期教程中,你遇到了插值的双曲括号{{and}}。...以下片段中,双花括号的标题和引号中的isUnchanged引用了AppComponent的属性。...事件循环的一个回合期间,依赖值不应该改变。如果一个幂等表达式返回一个字符串或一个数字,当它在一行中调用两次时会返回相同的字符串或数字。...响应事件是Angular的“单向数据流”的另一面。事件循环的这个周期中,您可以自由地在任何地方进行所有更改。 像模板表达式一样,模板语句使用了一种看起来像Dart的语言。...HTML属性(attributes)不起作用。 记住这个模型,继续阅读以了解绑定目标。 绑定目标 数据绑定的目标是DOM中的东西。

    5.2K10

    Angular快速学习笔记(2) -- 架构

    1.2.3 模板语法 模板会把 HTML 和 Angular 的标记(markup)组合起来,这些标记可以 HTML 元素显示出来之前修改它们。...Angular 每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树的根部开始,递归处理全部子组件。 ?... Angular 还有很多预定义指令,它们或者修改布局结构(比如 ngSwitch),或者修改 DOM 元素和组件的某些方面(比如 ngStyle...如何使用: Angular 中,要把一个类定义为服务,就要用 @Injectable 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中 使用 @Injectable 装饰器来表明一个组件或其它类...1.4 路由(Routing) Angular 的 Router 模块提供了一个服务,它可以让你定义应用的各个不同状态和视图层次结构之间导航时要使用的路径。

    5.3K20

    angular面试题及答案_angular面试

    指令分类 组件:用于构建UI组件,继承于Directive类 属性指令:用于改变组件的外观或行为 ngClass ngStyle 结构指令:用于动态添加或删除DOM元素来改变DOM布局 ngIf ngFor.../component name']) 8. 什么是ViewEncapsulation ViewEncapsulation 决定组件中定义的样式是否会影响整个应用程序。...Angular中有三种方法可以做到这一点: Emulated : 样式从其他HTML传播到组件。 Native : 来自其他HTML的样式不会传播到组件。...ngOnInit : angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges...ngOnInit可以用来初始化组件之间通信的,如异步请求等 参考:https://www.jianshu.com/p/af1d8f597b29 25.

    11.1K120
    领券