在离子2中动态更改颜色

Question

基于某种条件，我试图设置元素的颜色值。

所以，在我的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}">

这些都不起作用。我在做什么错或正确的方法是什么？

Answer 1

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

希望这有效

Answer 2

.html文件代码设置背景颜色

<ion-col col-12 *ngFor="let item of newsArray" class="dir-col" >
          <div class="cell-dot" [ngStyle]="{'background-color': item.colorCode}"> 
     </div>
</ion-col>

.ts文件代码从Web服务设置动态颜色代码

  this.totalSearchRecord = data["TotalNewsRecords"]
      for (let news of data["records"]) {
        this.newsArray.push({
          newsId: this.serviceProvider.checkNull(news['id']),
          newsTitle: this.serviceProvider.checkNull(news['PressReleaseTitle']),
          newsDes: this.serviceProvider.checkNull(news['PressReleaseShortDes']),
          newsDate: this.serviceProvider.checkNull(news['PressReleaseDate']),
          newsMonth: this.serviceProvider.checkNull(news['PressReleaseMonth']),
          alias: this.serviceProvider.checkNull(news['Alias']),
          colorCode:'#FFFFFF',
        });
      }

Answer 3

参考

当我们传递要在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;
    }

希望这对我有帮助。

Answer 4

在Angular 2/离子2中，更改对象颜色的简便方法是使用 them> them> them/variables.scss.scss file。

// 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 part

中的变量来做到这一点

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

以及在您的 typescript部分

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

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