Question

所以我有一个问题，我想在每次客户订阅体育课时都从卡上更改颜色。（红色表示已订阅，打开订阅时黄色）

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

所以我有一系列的类（名为 fechaClases ），看起来像这样：

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

我做错了什么？希望任何人都可以帮助我:)预先感谢大家！

Answer 1

您应该以更“角度”的方式思考。

您的列表是通过使用* 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 页面 .html 和 .ts 文件中）。

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

事件触发后，卡片的颜色没有改变

1 个答案: