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

Question

在 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";
}

Answer 1

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

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

1. 为您要显示的每个状态定义 CSS 类
2. 将定义的 CSS 类之一分配给您的元素
3. 存储当前状态/CSS 类
4. 处理更改

---

定义 CSS 类

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

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

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

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

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

.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>

---

还有see this Stackblitz 获取上述代码的可运行版本。