Ionic - 如何以编程方式设置项目的文本颜色？

在 Ionic (3) 中，如何以编程方式设置项目的文本颜色？

例如，单击列表项将更改（切换）列表项的颜色。

<ion-content>
  <ion-content padding>
    <ion-list>
      <ion-item *ngFor="let element of elements" #listitem (click)="changeTextColor(listitem)">
        Click to change text color of {{element}}
      </ion-item>
    </ion-list>
</ion-content>

使用changeTextColor的代码：

changeTextColor( listitem) {
    console.log( 'changing text color');
    listitem._color="danger";
}

所以这似乎是一个“当 Y 发生时重新设计 X”的问题，我将尝试解释一般解决此类任务的步骤。我回答过一个像这样的简单问题here，这也可能有助于入门。

解决此类问题通常包括以下步骤：

1. 定义 CSS 类对于您想要显示的每个状态
2. 分配已定义的 CSS 类之一到你的元素
3. 存储当前状态/CSS 类
4. 处理变更

定义 CSS 类

因此，首先，我们必须找到我们想要显示的状态。这些通常反映我们业务逻辑中的状态。为了演示起见，我将仅以两种状态为例danger and normal。这也可以是pending, complete and overdue（请参阅上面我的其他答案）或其他任何内容。

现在我们将为每个状态定义 CSS 类。在你的情况下，这可能看起来像这样：

.normal {
  color: black;
}
.danger {
  color: red;
}

当然，我们也可以设计background-color或这里的其他任何东西。

如果您想重复使用中定义的颜色variables.scss，您可以使用map-get功能像这样：

.danger {
  color: map-get($colors, danger);
}

分配已定义的 CSS 类之一

现在我们可以将初始 CSS 类分配给我们想要设置样式的元素。这非常简单，使用class操作员：

<ion-list>
    <ion-item *ngFor="let element of elements" [class]="normal">
        Click to change text color of {{element}}
    </ion-item>
</ion-list>

存储当前状态/CSS 类

接下来我们需要存储当前的状态/CSS 类，以便我们可以处理对其的更改。在你的情况下，我们必须翻转我们正在迭代的元素*ngFor到具有属性的对象中来存储我们当前的CSS类（我们将调用这个属性state):

elements = [{ text: 'hi', state: 'normal' },
  { text: 'there', state: 'normal' },
  { text: '!', state: 'normal' }];

如果您已经在使用对象，只需添加一个存储您的状态的属性。

我们必须更新 HTML 以反映代码中的更改：

<ion-list>
    <ion-item *ngFor="let element of elements" [class]="element.state">
        Click to change text color of {{element.text}}
    </ion-item>
</ion-list>

处理变更

我们已经动态设置状态/CSS 类，但如何处理更改？因此，我们将使用我们的逻辑创建一个方法：

changeTextColor(listitem) {
    if (listitem.state === 'normal') {
      listitem.state = 'danger';
    } else {
      listitem.state = 'normal';
    }
}

并在我们的 HTML 中使用它：

<ion-list>
    <ion-item *ngFor="let element of elements" (click)="changeTextColor(element)" [class]="element.state">
        Click to change text color of {{element.text}}
    </ion-item>
</ion-list>

Also 看这个Stackblitz获取上述代码的可运行版本。