在Ionic 2中动态改变颜色

基于某些条件，我试图设置元素的颜色值。在Ionic 2中动态改变颜色

所以，在我的TS文件，我已经采取了可变称为颜色我设置为

if(this.value>0) this.color="#ffc000!important";

在我的HTML文件，我试图通过以下方式设置此颜色

<ion-icon name="notifications" [style.color]="color">

以及使用这些ngstyle

<ion-icon name="notifications" [ngStyle]="{'color': color}">

没有正常工作。我做错了什么或者做什么是正确的方式？

来源

2016-12-27 user2739655

可能你缺少颜色代码和'！important'之间的空格，所以使用'this.color =“＃ffc000！important”;'然后再次检查 – ranakrunal9

http：// stackoverflow。com/questions/32495014/angular-ng-if-ng-style-not-changing-the-table-font-color - >或许这可以为你工作。 – Gene

Reference

当我们通过我们想在 name 财产离子使用的图标的名称
添加类基于该模式的图标。对于例如，如果你通过心脏：

<ion-icon name="heart"></ion-icon>

iOS上这将是：

<ion-icon class="ion-ios-heart"></ion-icon>

和材料的设计模式，这将是：

<ion-icon class="ion-md-heart"></ion-icon>

这样我们就可以用类名向它们添加CSS属性。

在你SCSS文件，

.ion-md-heart{ 
     color: red !important; 
    } 
.ion-ios-heart{ 
     color: red !important; 
    }

希望这有助于它为我工作。

来源

2017-07-30 12:58:54

<ion-icon name="notifications" [color]="color">

希望这个作品

来源

2017-07-30 15:55:34 iTR

在角2/2离子一种简单的方法来改变物体的颜色使用主题/ variables.scss文件。

// Named Color Variables 
// -------------------------------------------------- 
// Named colors makes it easy to reuse colors on various components. 
// It's highly recommended to change the default colors 
// to match your app's branding. Ionic uses a Sass map of 
// colors so you can add, rename and remove colors as needed. 
// The "primary" color is the only required color in the map. 

$colors: (
    primary: #488aff, 
    secondary: #32db64, 
    danger:  #f53d3d, 
    light:  #f4f4f4, 
    dark:  #222, 
    my-special-color: #ffcc55, 
);

我们动态地改变颜色的ionic2页面，您可以做到这一点通过在HTML部分

<button [color]="myBtnColor">MyButton</button>

而在你打字稿部分的颜色结合可变

import { ..., ChangeDetectorRef, ... } from '@angular/core'; 
... 
export class MyComponent { 
    myBtnColor = "secondary" 
    constructor(private changeDetectorRef:ChangeDetectorRef) {} 
    ... 
    function changeColorDynamicaly() { 
    myBtnColor = "my-special-color"; 
    this.changeDetectorRef.detectChanges(); 
    } 
    ... 
}

在我的情况下，ChangeDetectorRef用于查看视图中反映的实际更改。该视图被无效更新。

来源

2017-08-29 11:30:47

在Ionic 2中动态改变颜色

回答

相关问题