使用作用域变量时ngStyle绑定不起作用
ngStyle是Angular框架中的一个指令，用于动态绑定元素的样式。当使用作用域变量时，ngStyle绑定不起作用可能有以下几个原因：
- 作用域变量未正确绑定：确保作用域变量已经正确地绑定到模板中。可以通过在模板中输出变量的值来验证绑定是否成功。
- 作用域变量的值不满足ngStyle的要求：ngStyle指令要求作用域变量的值必须是一个对象，其中键是CSS属性，值是对应的样式值。确保作用域变量的值符合这个要求。
- 作用域变量的值没有变化：ngStyle只会在作用域变量的值发生变化时才会重新计算样式。如果作用域变量的值没有变化，ngStyle绑定不会起作用。可以通过在变量赋值之后手动触发变化检测来解决这个问题。
- 样式优先级的问题：如果同时存在多个样式设置，可能会出现样式优先级的问题。确保ngStyle绑定的样式优先级高于其他样式设置，可以使用!important来提高优先级。
- 其他可能的问题：如果以上方法都没有解决问题，可能是由于其他原因导致ngStyle绑定不起作用。可以尝试使用浏览器的开发者工具来检查元素的样式是否正确应用。
对于ngStyle绑定不起作用的问题，可以参考腾讯云的Angular文档，了解更多关于ngStyle的用法和示例：ngStyle - Angular指令
相关·内容
当要更新的属性是与ngStyle或style.property绑定时，我无法使我的css转换工作
HTML：
<div class="bar" [style.width]="size +'%'"></div>
CSS：
.bar{ width:0; transition: width .5s ease-out; }
JS :大小已正确更新...
可以肯定的是，如果我移除html中的样式绑定并更新宽度on :hover，则转换可以正常工作。我错过了什么吗？
如果我让style.width绑定并将它悬停在ex.宽度:50%！重
浏览 1提问于2016-10-11得票数 1
场景：
我有一个元素在我的角度应用程序，我想添加一个背景图像。现在我有这样的想法：
<div class={{background-class}}></div>
例如，在我的样式表中，background-class是“背景样式-1”，如下所示：
background-style-1 {
background-image: url(../../../../assets/images/contextmenu/person.png);
}
元素成功地显示了图像，如果我查询它，它将显示如下：
问题：
我不想把所有的背景图像URL硬编码到我的样式表中。相反，我只想将U
浏览 2提问于2019-12-18得票数 1
6回答
带角插值的内嵌CSS
、、、、
我正在致力于角化，并试图根据"cardData.color"指定的颜色动态地设置这个div背景颜色。
例如。
cardData = {id: '1', color: '#202020'};
我试过下面所示的代码，但它不起作用。
<div style="background-color: {{cardData.color}}; padding: 10px 20px;"></div>
有什么办法，我可以根据对象的颜色动态设置背景颜色吗？？谢谢。
浏览 0提问于2019-07-11得票数 0
回答已采纳
我有一个用angularjs编写的应用程序，我想把它转换成Angular 8。 ng-attr-style="width:{{countersDtl.SurveySubmittedInstant/(countersDtl.ServiceDone)*100}}%“ countersDtl是一个具有键SurveySubmittedInstant和ServiceDone的对象。 我有多个使用ng-attr样式的元素，就像这样。 我尝试了从style.width到ngStyle的所有方法，但都不起作用。
浏览 8提问于2021-10-07得票数 -1
回答已采纳
我使用Angular 6，我有一个简单的div，想从模板内部设置这个div的背景色。在传递正常颜色时，此操作效果良好。但这不适用于CSS变量。
这个例子是可行的
<div [style.background]="'red'">...</div>
这个例子不起作用。
<div [style.background]="'var(--some-css-var)'">...</div>
浏览 0提问于2018-09-12得票数 6
回答已采纳
6回答
我试图从类(通过属性绑定获得)绑定一个颜色属性，以设置我的background-color的div。
import {Component, Template} from 'angular2/angular2';
@Component({
selector: 'circle',
bind:{
"color":"color"
}
})
@Template({
url: System.baseURL + "/components/circle/template.html",
})
export
浏览 4提问于2015-04-08得票数 96
4回答
我正在自学角4，我想知道是否可以这样做：
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-
valuemin="0" aria-valuemax="100" style="width {{ item.percent_position}}%;">
{{ item.percent_position }}</div>
浏览 7提问于2017-12-05得票数 6
回答已采纳
7回答
我正在开发一个简单的，用户可以使用属性绑定修改组件，到目前为止，我已经做了以下工作来应用他们的选择：
<div [style.background]="color" [style.width.px]="width" [style.height.px]="height"></div>
但是对于将来的添加，我希望用[ngStyle]="styleObject"来简化添加更多属性的混乱，我试图实现这样的目标：
@Input() width: number;
@Input() height: number;
pu
浏览 4提问于2017-06-09得票数 30
回答已采纳
1回答
我们可以使用插值将输入写入模板：
@Component({
selector: 'tag',
inputs: ['color'],
template: `
<div id="test" style="background: {{color}}">
Some text
</div>
`,
})
class TestComponent {
}
我的问题是:它是否有可能(以某种方式)像这样工作：
@Component({
浏览 1提问于2016-05-07得票数 5
回答已采纳
我试着理解单向绑定和插值之间的区别，发现对于ngClass，这两者似乎是等价的，但对于ngStyle，我无法使用插值来使其工作(只有绑定有效)。请参阅以下StackBlitz：https://angular-a6cvfb.stackblitz.io以获取实时示例。 下面注释掉的ngStyle语法对我来说都不起作用。我错过了什么吗？非常感谢！ {注意:所有被注释掉的东西都是这样的，否则就会破坏代码}。 import { Component, Input } from '@angular/core';
@Component({
selector: 'hello
浏览 38提问于2019-04-10得票数 1
1回答
我有一个拖放容器，用角2字体书写。在将文件拖到容器中时，我想更改拖放容器的背景色。
打字本：
@HostListener('dragover', ['$event']) public onDragOver(evt){
evt.preventDefault();
evt.stopPropagation();
}
@HostListener('dragleave', ['$event']) public onDragLeave(evt){
evt.preventDefault();
evt.stopPropagation()
浏览 0提问于2017-06-05得票数 1
回答已采纳
HTML代码
<div class="form-group" style="display: flex !important;"
*ngFor="let mesureitem of sampledetails.ActualMeasurements;let i = index">
<div class="col pl-0">
<label>Actual Status({{mesureitem.Name}}) </label>
<se
浏览 1提问于2020-01-30得票数 0
回答已采纳
4回答
基于某些条件，我尝试设置元素的颜色值。
因此，在我的TS文件中，我接受了一个名为color的变量，我将其设置为
if(this.value>0) this.color="#ffc000!important";
在我的HTML文件中，我尝试过用以下方法设置这种颜色
<ion-icon name="notifications" [style.color]="color">
以及使用ngstyle
<ion-icon name="notifications" [ngStyle]="{'colo
浏览 4提问于2016-12-27得票数 4
我不能让jquery可调整大小来使用Angular和ng样式。我知道在创建可调整大小的元素时必须指定高度和宽度，但正如您从下面的jsfiddle中看到的那样，任何ng样式似乎都被忽略了，并且没有应用高度和宽度。
<div ng-controller="myCtrl">
<img resizable src="http://lorempixel.com/400/200/"
ng-style="{'width':'400px', 'height':'200px'
浏览 15提问于2016-08-18得票数 0
回答已采纳
1回答
我正在尝试使用组件更改css变量，但由于某些原因它不起作用，有帮助吗？ //work but i dont want to use the property background
<div class="planete" [ngStyle]="{'background': planete.planeteBackgroundColor }"></div>
/* this is what i'd like to do :
.SCSS
$my-var
/*...*/
background: $my-var; H
浏览 19提问于2021-02-01得票数 0
1回答
ngModel不起作用。我把它和文本框一起用。
app.component.html
<input type="text" [value]="name" [ngModel]="name">
Name is: {{name}}
app.component.ts
name = '';
constructor() { }
ngOnInit(): void {
this.name = "Hello";
}
当我更改textbox值时，该值在组件中不会更改。但是双向数据绑定使用的是[(ngModel)]=&
浏览 7提问于2022-08-28得票数 0
回答已采纳
3回答
我想要显示一个当我点击一个按钮时隐藏的div。我正在使用Angular7，我尝试了一些方法，但它们都不起作用。请帮帮我。谢谢
浏览 0提问于2019-02-22得票数 2
1回答
我正在应用服务器认证和数据库搜索引擎中开发动态样式元素特性。
时searchNoResult，UI是：
当单击触发execSearch()事件的按钮时，-> searchSuccess为true，模板searchSuccessColor生效(文本backgroundColor变为粉红色)。但是，我似乎无法将颜色动态地样式化：
--我尝试将模板设置为如下，但没有工作：
<button class="button"
[disabled] = "!enableSearch"
(click) = "exe
浏览 7提问于2020-06-15得票数 2
回答已采纳
我在角6中有以下代码：
<div [innerHtml]="content"></div>
我从服务调用(即外部库)中获得content变量。它包含类名，如p1。
var content = '<p class="p1">This is some text</p>';
现在，我要从AngularJS迁移这段代码。在AngularJS中，我经常在指令模板中操作css类，比如p1：
.p1 {
font-family: {{theFamily}};
}
但是，当我尝试在角6组件样式表中做同样的操作
浏览 0提问于2018-10-09得票数 0
1回答
我是Angular 2的新手。
我尝试通过内插名为bgImage的字符串变量的值来设置div的背景图像，该变量包含图像的有效url。
但是，我不知道如何在括号内获得一对转义的双引号‘
如何在角度2模板插值中对字符进行转义？
这不起作用：
[style]="'background-image: url(\"'+bgImage+'\");'"
或者这样：
[style]="'background-image: url(\''+bgImage+'\');'"
甚至HTM
浏览 2提问于2016-08-23得票数 0
我有一个ag-grid组件，它在HTML文件中采用a样式，如下所示：
style="height: 600px; width: 100%"
像这样使用它很好，但我试图从外部设置高度和宽度，这就是我有问题的地方。例如，如果我使用
style="height: {{gridHeight}}; width: {{gridWidth}}"
它不起作用。我不确定我在这里遗漏了什么。另外，有没有一种方法可以检查是否有{{gridHeight}}的值，然后我们使用它，否则我们就使用500px
这就是我在html模板中设置网格的方式，所以div内容不是一个选项。
<ng-
浏览 8提问于2019-11-21得票数 0
我已经开发了一个包含一个按钮和一个<p>Hello World</p>的组件test1。当我点击按钮时，段落的背景颜色就会改变。但是现在，当我点击按钮时，我想在app.component中改变背景颜色。我试图用@Input解决这个问题，但不幸的是它还不起作用。你能帮帮我吗？
我的代码：
// test1.component
// HTML
<button type="button" (click)="testHandler()">Change Color</button>
<p [class.toggled
浏览 4提问于2020-09-20得票数 1
因此，在我的应用程序中，有两个滑块，它们的输出值介于1和100之间。根据输出，我想将div的边距设置为输出的百分比。我试过很多方法，但谷歌似乎对我的确切问题没有答案 因此，在.ts文件中，我有一个名为"xpos“的变量，它存储滑块的输出。下面的代码是我试图解决我的问题，但它似乎不起作用； <p [ngStyle]="{margin-left.%: {{xpos}}}">Test</p>
浏览 12提问于2019-09-09得票数 0
回答已采纳
2回答
我使用Angular的ng样式和css的“calc()”实现了以下内联样式，但它不起作用。有人能告诉我出了什么问题吗？
// my jade file has a class named '.logo-area'.
.logo-area(ng-style="{'right':'calc(100% -'+({{fixedWidth}}+'px') +')'}")
浏览 0提问于2015-10-15得票数 3
我正在尝试为一个使用typescript的类设置zindex。但它不起作用。如果你有任何想法，请与我分享。
ngOnInit() { (<HTMLElement>document.querySelector('.pagemode')).style.z-index = 1;}
浏览 0提问于2018-07-23得票数 8
回答已采纳
我正在尝试将所有‘按钮’和'a‘标签的颜色设置为来自变量的颜色。就像这样，显然不起作用。
@Component({
styles: [`
a, button {
color: {{ color_from_variable }};
}
`]
浏览 3提问于2017-11-20得票数 1
回答已采纳
angular ngstyle拒绝设置样式。我正在尝试限制容器的大小。在init page load时，我将init width设置为1100。但是使用ng样式会忽略这些样式。为什么？
这是可行的：
<mat-card style="width:1100px;">
这不起作用：
cardwidth = 1100; //set in TypeScript
[style.width.px]="cardwidth"
[style.width]="cardwidth + 'px'"
[ngStyle]="
浏览 1提问于2018-03-30得票数 3
如何使用[ngStyle]覆盖离子自定义CSS
我试过下面的代码，但它不起作用：
[ngStyle]="{'--color': 'blue'}"
浏览 1提问于2019-11-15得票数 0
我有一个在typescript中填充的数组，基于数组中的值，我想为我的div设置不同的背景颜色，但它不起作用。我做错了什么？ 我试着用style.backgroundColor="statusColori“来设置背景。statusColor是在我的typescript中声明的数组。如果我尝试在不使用数组的情况下将其绑定到单个对象，它将正常工作，如下所示: style.backgroundColor="statusColor“。这是我得到的错误:无法读取未定义的属性'0‘ 下面是代码:这是我的json对象接口： export interface IComplaint {
浏览 10提问于2019-01-30得票数 2
1回答
我想在angular 6中动态改变div的宽度。这个页面是用flex设计的。所以，我需要增加宽度，就像width : 41vw;一样，但是，[ngStyle]="width: '41vw'"根本不起作用。
浏览 13提问于2019-06-25得票数 0
这里是我的plnkr：你必须点击一个li元素，表单就会出现。输入一个随机字符串，然后点击“添加通知”。你将得到未定义的文本区域，而不是文本区域。
标记：
<ul>
<li ng-repeat="ticket in tickets" ng-click="select(ticket)">
{{ ticket.text }}
</li>
</ul>
<div ui-if="selectedTicket != null">
<form ng-su
浏览 0提问于2013-04-30得票数 52
回答已采纳
我正在学习angular，我来自jQuery背景，面临着抓住angular的难题。因此，我经常在理解angular代码中的许多东西时遇到困难。
刚刚看了下面的代码，我不明白下面的指令中的作用域是做什么的？
但是如果我从下面的指令中删除作用域，那么什么将不起作用？所以如果可能的话，请用一个例子帮助我理解作用域的用法和它的重要性。谢谢
<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} — {{item.price}}</l
浏览 1提问于2016-04-10得票数 2
2回答
使用Angularjs，可以将事件绑定到dom元素，如下所示：
<div ng-controller="SampleController">
<a ng-click="showTheHiddenDiv()">Show the hidden div</a>
<div ng-show="showHiddenDiv">
hidden content
</div>
</div>
我的问题是:是否可以从控制器外部附加像这样的事件处理程序函数，就
浏览 6提问于2014-06-19得票数 4
回答已采纳
3回答
我试图制作一个以角度表示可切换宽度值的导航菜单。在“资产”文件夹中，我有一个variables.scss文件，其中包含捆绑在一个文件中的所有变量，以便于访问。我的variables.scss看起来是这样的：
//global variables
$globalNavWidth: 250px;
导航角组件有自己的样式表navbar.scss，它的宽度属性链接到如下所示的变量：
.navbar{
width: $globalNavWidth;
我的文件夹结构看起来像这样。
我的导航中有一个按钮，在单击时触发函数'toggleNavWidth()‘。有没有办法从这个$globalN
浏览 0提问于2019-04-02得票数 0
回答已采纳
我的html页面中有以下代码：
<div *ngIf="loading && chartOptionsXrange">
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptionsXrange"
[(update)]="updateFromInput
浏览 2提问于2020-09-29得票数 0
回答已采纳
1回答
我有一张照片，由手机的摄像头拍摄，结果就像http://localhost:8080/var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/tmp/cdv_photo_001.jpg一样。
无论我尝试什么，我都无法让它为给定的div设置背景图像。(在该div上使用内联CSS )。
So: <div style="background: url('{{ imageUrl }}');">不工作( div有高度和宽度，当我将背景放置到yellow时，会看到黄色
浏览 0提问于2018-07-22得票数 0
回答已采纳
1回答
我们在把作用域放入控制器时遇到了问题，将angular版本降级到1.5.3实际上就是修复它。
有没有人可以帮我们解决angular 1.6.3的问题，或者是否需要做一些不同的事情？
请忽略任何语法错误，因为实际代码没有任何语法错误
// Simple Directive
var directive = {
restrict: 'EA',
templateURL: 'sometemplate.html',
scope: {
text: '@'
},
bindToController: tr
浏览 0提问于2017-03-25得票数 0
1回答
几天前，我刚刚启动了AngularJS，并且我读到，只要它们的链接元素的值发生变化，作用域就会立即更新。我的控制器有以下HTML代码：
<div ng-controller="lyricsMod">
<textarea ng-model="valueB"></textarea>
{{valueA}}
我的AngularJS控制器：
myMod.controller('lyricsMod', function($scope) {
$scope.valueA = $scope.valueB;
});
然而，这没有
浏览 0提问于2015-02-11得票数 0
回答已采纳
1回答
样式不适用于禁用元素
、、、、
样式不起作用，我们在文本元素中使用禁用属性。为什么？
<input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%'}"
disabled="disabled" [(ngModel)]="selectedApprovalDate" />
它抛出了这个错误：
如果我删除了样式[style
浏览 1提问于2017-05-09得票数 1
回答已采纳
1回答
我有个小问题..。我有一个div，我想应用这样的内联样式：
div style="background: url(..{{config.general.image}})"></div
坏的部分是它在beta 16中工作，但是由于我升级到RC1，它没有..就这一点而言，style.background也不起作用..。但是，如果我在类标记或模板中的任何位置输出{{config.general.image}，它就会工作。
这是个窃听器还是做了什么改变？
浏览 3提问于2016-05-05得票数 2
回答已采纳
我有一个NgStyle标签，我想在其中使用多个条件，但要么它不起作用，要么我收到错误。
到目前为止，这是我的代码：
<div class = "card" [ngStyle]="{'height': Card.duration.Hours == 1 ? '130px': height}"
[ngStyle]="{'height': Card.duration.Hours < 1 ? '100px': height}"
&g
浏览 2提问于2019-06-20得票数 1
1回答
我想将常规HTML元素(比如span)的颜色更改为一种主题颜色。如何从Stylus文件中引用此颜色(原色/重音/等)？ 我找到的几乎所有答案都描述了如何使用SCSS来做到这一点，但似乎提供的解决方案在case Stylus中不起作用。
浏览 12提问于2020-04-28得票数 0
3回答
我想在ngFor循环中动态使用动画延迟。所以我使用style="animation-delay:'i's;"，其中i是循环变量。这不管用。我的代码如下：
<div class="yourdiv" *ngFor = "let item of gvp.userMessages;let i = index" [attr.data-index]="i"
style="animation-delay:'i's;">
<div style
浏览 2提问于2017-10-27得票数 9
回答已采纳
<span>Select color : </span>
<select ng-model="myStyle">
<option value="">none</option>
<option value="{color:red}">Red</option>
<option value="{color:'green'}">Green</option>
</select>
浏览 1提问于2013-08-30得票数 6
回答已采纳
我正在做一个非常基本的图像幻灯片。我只需切换到背景图像到任何选择的图像。但是当我第一次改变图像时，backgroundSize: cover似乎已经消失了。当我再次改变它的时候，它也不会回来了。我真的不明白这种行为..。
下面是我在stackblitz上的代码链接：
下面是到演示的链接：
当我用background-size: cover添加css类时，它也不起作用。
谢谢你的帮助!
浏览 4提问于2020-02-25得票数 0
回答已采纳
1回答
使用ngModel进行双向数据绑定
<input [(ngModel)]="this.name" >
实际上是
<input [value]="this.name" (input)="this.name=$event.target.value>
因此ngModel在内部将<input>的(input)事件映射到this.name
我在哪里可以找到关于ngModel为<p>等其他元素生成的事件的信息？
我想在点击<p>时增加<p>的字体。我可以在没有ngModel的情况下做到这一点，但
浏览 5提问于2017-06-23得票数 0
2回答
这是我的css文件，我试图这样做：
.login-wrapper {
background-image: url({{imagePath}});
}
我的组成部分：
export class LoginComponent implements OnInit {
imagePath: any = 'assets/discord-logo.png';
constructor() {}
ngOnInit() {}
}
它不起作用。
如何将'imagePath‘从我的组件注入到css文件？
谢谢你的帮助
浏览 2提问于2021-12-02得票数 0
回答已采纳
我将有多个按钮，并且需要使用表单来设置按钮的样式。每个按钮应该能够获得自己的特定样式。在下面的示例中，我尝试单击列表中的一个按钮以将其选中，然后单击一个单独的按钮以使用[ngStyle]将样式应用于所选按钮。到目前为止，一切似乎都正常，除了通过[ngStyle]的新样式没有被应用，我看不到任何错误。 <div *ngFor="let button of buttons;">
<button class="button" [class.selected]="button === selectedButton" [ngSt
浏览 22提问于2021-04-09得票数 0
1回答
我正在尝试使用.toggle bellow，但它似乎不起作用。
我的目标是，当你点击点击文本时，一个框从页面的视图之外出现，并水平进入某个位置。当你再次点击时，它会回到屏幕外的位置。贝洛:我刚才一直在摆弄垂直高度。但是我好像不能让切换功能起作用？
$(document).ready(function () {
$("#click").toggle(Click1, Click2).click(function Click1() {
$(".test").animate({
top: "300px"
});
});
浏览 0提问于2013-03-19得票数 0
回答已采纳
2回答
在角6中根据条件改变div宽度
、、、、
我想根据以下条件更改div宽度，
<div [ngStyle]="'width': selectedTab =='Home' ? '50%' : '100%'">
</div>
我得到了在"selectedTab".中被选中的选项卡
我有两个标签。
1)指数
2)家
如果我选择索引选项卡，div宽度应该是"100%“。如果我选择home选项卡，div宽度应该是"50%“。我写了ngStyle条件，但它不起作用。
请帮助我如何处理这种情况。
浏览 1提问于2018-08-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
