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 的示例为例.这也可能是待处理，完成和过期(请参见上面的其他答案)或其他任何内容.

---

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运算符很简单:

---

Assign one of the defined CSS classes

Now we can assign our initial CSS class to the elements we want to style. This is pretty straight forward using the class operator:

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

---

处理更改

我们已经在动态设置state/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屋！