ng-style

问题 In angular, I need to apply different style attributes based on different conditions but its not working this way and I only can apply 2 conditions with conditional expression. <div ng-style=" (status=="up") ?{'background-color':'green' ,'color':'green'} (status=="down")?{'background-color':'red' ,'color':'red'} (status=="idle")?{'background-color':'yellow','color':'yellow'} (status=="") ?{'background-color':'grey' ,'color':'grey'} "> It would be better if you know any way to pass attribute

来源： https://stackoverflow.com/questions/64050633/ngstyle-changes-not-always-reflected

来源： https://stackoverflow.com/questions/64050633/ngstyle-changes-not-always-reflected

问题 I'm using Angular 5.2.9. I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ? 1: <div #div>FOO BAR</div> @ViewChild('div') div: ElementRef; constructor(private renderer: Renderer2) {} ngAfterViewInit() { this.renderer.setStyle(this.div.nativeElement, 'background', 'blue'); } 2: <div [ngStyle]="styleValue">FOO BAR</div> styleValue: any = {}; ngAfterViewInit() { this.styleValue = {background: 'blue'}; } I know that it is easier to use "ngStyle" in a ngFor, eg:

问题 I'm using Angular 5.2.9. I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ? 1: <div #div>FOO BAR</div> @ViewChild('div') div: ElementRef; constructor(private renderer: Renderer2) {} ngAfterViewInit() { this.renderer.setStyle(this.div.nativeElement, 'background', 'blue'); } 2: <div [ngStyle]="styleValue">FOO BAR</div> styleValue: any = {}; ngAfterViewInit() { this.styleValue = {background: 'blue'}; } I know that it is easier to use "ngStyle" in a ngFor, eg:

问题 I'm new to angular and keep getting the following error in the console TypeError: name.replace is not a function . I'm not sure what's exactly causing it, but it seems to be caused by the ng-style statement and maybe something to do with the camelCase? The part I don't understand is why ng-style="isFrontView() || !matches && {'display': 'none'}" throws the error, but ng-style="!isFrontView() || !matches && {'display': 'none'}" doesn't throw the error. In an attempt to remedy the situation I

问题 I have a div that I want to style based on a condition. If styleOne is true I want a background colour of red. If StyleTwo is true, I want the background colour to be blue. I've got half of it working with the below code. <div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}"> Is it possible to add a condition to say: if styleOne is true, do this if styleTwo is true, do this? Edit I think i've resolved it. It works. Not sure if it's the best way: <div id="div" [ngStyle]="styleOne

问题 I am designing a dynamic hr (horizonatal) rule. In my Style sheet hr.my-hr:after{ content:'Generic' } In my template <div ng-repeat="name in ['Adam', 'Collin', 'David']"> <hr class="my-hr" ng-style="{'content':name}"> But how do i dynamically change the content in the template when using ng-repeat ???? 回答1: All ng-style does is add inline styles. However you want to add a psuedo element ::after . According to the MDN: You can use only one pseudo-element in a selector. It must appear after the

问题 Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have: HTML <div class="offer-detail-image-div"><div> CSS .offer-detail-image-div { position: relative; display: block; overflow: hidden; max-width: 800px; min-height: 450px; min-width: 700px; margin-right: auto; margin-left: auto; padding-right: 25px; padding-left: 25px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;

问题 Im trying to figure out how to make this work on IE: <div ng-if="result.is_mesurable==true" style="left:{{ (result.user_score * 20)-10}}%" class="test-box"> The code basically generates a dynamic table, and the left position of the object is taken from the user_score value. I know that IE doesn't read this declaration properly, i had a similar bug in the past: AngularJS weird render issue "Because {{xxx.xxx}} is invalid css it is trucated by IE and when the angular compiler scans all