Цвет с карт не меняется после срабатывания события - PullRequest
1 голос
/ 19 октября 2019

Так что у меня есть проблема, когда я хочу менять цвета своих карточек каждый раз, когда клиент подписывается на занятия в тренажерном зале. (Красный для уже подписанного, желтый, когда открыт для подписки)

Проблема, которую я получаю, заключается в том, что когда я делаю подписку на один класс, все элементы из массива получают красный цвет, вместо этогоиз одного.

enter image description here

Итак, у меня есть массив классов (с именем fechaClases ), который выглядит следующим образом:

classes

Мой HTML код выглядит следующим образом:

 <ion-card color="light" *ngFor="let fecha of fechaCards">
        <ion-item color="warning">
            <ion-icon slot="start" name="fitness"></ion-icon>
            <ion-label>
                <h2 style="font-weight: bold">{{ fecha | date:'d/MMMM/yyyy' | uppercase }}</h2>
            </ion-label>
        </ion-item>

        <!-- CONTENIDO --> ---> **Here is where I want to change colors** 
        <ion-card-content>  
            <ng-container *ngFor="let clase of fechaClases">
                <ion-item [color]="getColor()" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">
                    <h2 slot="start" style="font-weight: bold">{{ clase.horaApertura | date: 'shortTime' }}</h2>
                    <h2 slot="end">{{ "Cupos disponibles" + " " + clase.cuposDisponibles + "/" + clase.cupos }}</h2>
                </ion-item>
            </ng-container>
        </ion-card-content>
    </ion-card>

getColor ()

for (let index = 0; index < this.fechaClases.length; index++) {
      if (this.fechaClases[index].estaInscripto == true) {

        console.log(this.fechaClases[index].estaInscripto, 'true');
        return 'danger'
      }
      else {
        return 'warning'
      }
    }

что я делаю не так? Надеюсь, что кто-нибудь может мне помочь :) Заранее спасибо, ребята!

1 Ответ

2 голосов
/ 19 октября 2019

Вы должны думать более «угловато».

Ваш список создается путем перебора массива fechaClases с использованием директивы * ngFor. Вам просто нужна условная привязка свойства color , проверяющая свойство estaInscripto каждого объекта массива.

Итак, измените эту строку:

<ion-item [color]="getColor()" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">

на эту:

<ion-item [color]="clase.estaInscripto? 'danger' : 'warning'" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">

Кроме того, удалите функцию getColor () , тамв этом нет необходимости.

Проверьте этот стек (внутри файлов home .html и .ts ) с упрощенным рабочим примером. из перечисленного.

https://stackblitz.com/edit/ionic-e7pfdz

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...