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这样的简单问题，这也许也可以帮助您入门。

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

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

定义CSS类

因此，首先我们必须找到要显示的状态。这些通常反映我们业务逻辑中的状态。为了演示起见，我将以您仅举两个状态 danger 和 normal 的示例为例。这也可能是待处理，完整和过期（请参见上面的其他答案）或其他任何内容。

现在，我们将为每个状态定义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也是上述代码的可运行版本。

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

1 个答案:

定义CSS类

分配已定义的CSS类之一

存储当前状态/ CSS类

处理更改