Html 事件触发后，卡的颜色不会改变

所以我遇到了一个问题，每次顾客报名参加体育课时，我都想改变卡片的颜色。（红色表示已订阅，黄色表示开放订阅）

我遇到的问题是，当我订阅一个类时，数组中的所有元素都是红色的，而不是一个

所以我有一个类数组（名为fechaClases），如下所示：

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

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

{{fecha | date:'d/MMMM/yyyy'|大写}
--->**我想在这里更改颜色**
{{clase.horaApertura | date:'shortTime'}
{{“Cupos disponiles”+“”+clase.cuposdisponiles+“/”+clase.Cupos}

getColor（）

for（让index=0；index

---

我做错了什么？希望有人能帮我：）提前谢谢大家

你应该以更“有角度”的方式思考

您的列表是通过使用*ngFor指令在fechaClases数组上迭代创建的。您只需要对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（）函数，不需要它

用上述简化的工作示例检查stackblitz（在home page.html和.ts文件中）