ionic-framework - 离子文本颜色更改onclick(Ionic Text color change onclick)

Question

I'm a beginner in Ionic 3.

(我是Ionic 3的初学者。)

I have a 4 text in same color, I'm trying to make when I click on the 4 text at for time I want to change color.

(我有一个相同颜色的4文本，我想在我想更改颜色的时候单击4文本。)

Example

(例)
I click on 1st text, then I want to change it black color I click on text 2, then I want to change black color and 1st text is set a default color,

(我单击第一个文本，然后将其更改为黑色。我单击文本2，然后更改为黑色，并将第一个文本设置为默认颜色，)

Please help me to fix this issue

(请帮助我解决此问题)

    <div class="row">
      <div  class="col right-border">
        <div  text-center>
          <h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
        </div>
      </div>
      <div  class="col bottom-border">
        <div text-center>
          <h2  class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div  class="col top-border">
        <div  text-center>
          <h2  class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
        </div>
      </div>
      <div class="col left-border">
        <div  text-center>
          <h2  class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
        </div>
      </div>
    </div>
  </div>

  ask by core114 translate from so

Answer 1

You can use [ngClass] attribute to achieve this.

(您可以使用[ngClass]属性来实现。)

This can be used to dynamically return the class name as per the last clicked text.

(这可用于根据最后单击的文本动态返回类名。)

The code will be something like below.

(该代码将如下所示。)

 <div class="row">
  <div  class="col right-border">
    <div  text-center [ngClass]="getTextColor('text1')" (click)="setSelectedText('text1')">
      <h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
    </div>
  </div>
  <div  class="col bottom-border">
    <div text-center [ngClass]="getTextColor('text2')"  (click)="setSelectedText('text2')">
      <h2  class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
    </div>
  </div>
</div>
<div class="row">
  <div  class="col top-border">
    <div  text-center [ngClass]="getTextColor('text3')"  (click)="setSelectedText('text3')">
      <h2  class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
    </div>
  </div>
  <div class="col left-border">
    <div  text-center>
      <h2  class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
    </div>
  </div>
</div>

In controller

(在控制器中)

 private selecteTextId :string;

 setSelectedText(textId:string) {
     this.selecteTextId = textId;
 }

 getTextColor(textId:string):string{
   return this.selecteTextId == textId? "highlight-color" : "";
 }

In scss file

(在scss文件中)

.highlight-color {
  color:blue;
}