Ionic - 如何以编程方式设置项目的文本颜色? [英] Ionic - How can I programmatically set the text color of an item?

问题描述

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

In Ionic (3), how can I programmatically set the text color of an item?

例如，单击列表项将更改(切换)列表项的颜色.

For example, clicking on a list item will change (toggle) the color of the list item.

<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的代码:

With the code of the changeTextColor:

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

推荐答案

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

So this seems to be a "Restyle X when Y happens"-question, I'll try to explain the steps to resolve a task like this in general. I've answered a simpler question like this here, which might also help to get started.

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

Solving this kind of problems normally includes the following steps:

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

1. Define CSS classes for each state you want to display
2. Assign one of the defined CSS classes to your element(s)
3. Store the current state/CSS class
4. Handle changes

<小时>

定义 CSS 类

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

---

Define CSS classes

So, first of all, we'll have to find the states we want to display. These often reflect states in our business logic. For the sake of demonstration, I'll take your example of only two state danger and normal. This could also be pending, complete and overdue (see my other answer above) or anything else.

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

Now we're going to define CSS classes for every state. In your case this could look something like this:

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

当然，我们也可以在此处设置 background-color 或其他任何内容的样式.

Of course, we could also style the background-color or anything else here.

如果你想重用 variables.scss 中定义的颜色，你可以使用 map-get 函数 像这样:

If you want to reuse colors defined in variables.scss, you can use the map-get function like so:

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

---

Store the current state/CSS class

Next we need to store our current state/CSS class, so we can handle changes to it. In your case we'll have to turn the elements we're iterating over with *ngFor into objects with a property to store our current CSS class (we'll call this property state):

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

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

If you're already using objects just add a property storing your state.

我们必须更新我们的 HTML 以反映我们在代码中所做的更改:

We'll have to update our HTML to reflect our changes in the code:

<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 类，但是如何处理更改?因此，我们将使用我们的逻辑创建一个方法:

---

Handle changes

We're already setting our state/CSS class dynamically, but how to handle changes? Therefore we'll create a method with our logic:

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

并在我们的 HTML 中使用它:

And use it in our 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>

<小时>

另外查看此 Stackblitz 以获取上述代码的可运行版本.

---

Also see this Stackblitz for a runnable version of the above code.

这篇关于Ionic - 如何以编程方式设置项目的文本颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！