Question

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

所以，在我的TS文件中，我使用了一个名为color的变量，我将其设置为

  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

Reference

当我们传递我们想要在name中使用的图标的名称时   property ionic根据模式为该图标添加类。对于   例如，如果你通过心脏：

<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 / Ionic 2中，一种更改对象颜色的简单方法是使用 theme / 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>

在 TypeScript部分

中

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

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

在Ionic 2中动态改变颜色

4 个答案: