title: Color from cards are not changing after event is fired
body: <p>So I've a problem where I want to change colors from my cards everytime a customer get subscribed to a gym class. ( Red for already subscribed, yellow when is open to subscription)</p>
  
  <p>The problem I'm getting is, anytime when I make a subscription to one class, all the elements from the array, got the color red, instead of one.</p>
  
  <p><a href="https://i.stack.imgur.com/oNr6S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oNr6S.png" alt="enter image description here"></a></p>
  
  <p>So I've an array of classes(named <strong>fechaClases</strong>) which looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Yqs72.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yqs72.png" alt="classes"></a></p>
  
  <p>My <strong>HTML</strong> code looks like this:</p>
  
  <pre><code> &lt;ion-card color="light" *ngFor="let fecha of fechaCards"&gt;
          &lt;ion-item color="warning"&gt;
              &lt;ion-icon slot="start" name="fitness"&gt;&lt;/ion-icon&gt;
              &lt;ion-label&gt;
                  &lt;h2 style="font-weight: bold"&gt;{{ fecha | date:'d/MMMM/yyyy' | uppercase }}&lt;/h2&gt;
              &lt;/ion-label&gt;
          &lt;/ion-item&gt;
  
          &lt;!-- CONTENIDO --&gt; ---&gt; **Here is where I want to change colors** 
          &lt;ion-card-content&gt;  
              &lt;ng-container *ngFor="let clase of fechaClases"&gt;
                  &lt;ion-item [color]="getColor()" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha"&gt;
                      &lt;h2 slot="start" style="font-weight: bold"&gt;{{ clase.horaApertura | date: 'shortTime' }}&lt;/h2&gt;
                      &lt;h2 slot="end"&gt;{{ "Cupos disponibles" + " " + clase.cuposDisponibles + "/" + clase.cupos }}&lt;/h2&gt;
                  &lt;/ion-item&gt;
              &lt;/ng-container&gt;
          &lt;/ion-card-content&gt;
      &lt;/ion-card&gt;
  </code></pre>
  
  <p><strong>getColor()</strong></p>
  
  <pre><code>for (let index = 0; index &lt; this.fechaClases.length; index++) {
        if (this.fechaClases[index].estaInscripto == true) {
  
          console.log(this.fechaClases[index].estaInscripto, 'true');
          return 'danger'
        }
        else {
          return 'warning'
        }
      }
  </code></pre>
  
  <p>what i'm doing wrong? Hope anyone can help me :) Thanks in advance guys!</p>