Tengo tres cartas que muestro
<div *ngFor="let catalog of catalogs;let i=index" (click)="goToProducts(catalog)"> <div> <div class="name-position text {{catalog.classe}}" style="font-size: 21px;"> <img *ngIf="i == 1" style="max-width: 70%;" class="logo-catalog-header" src="assets/images/1.png" /> <img *ngIf="i == 2" style="max-width: 70%;" src="assets/images/2.png" /> <img *ngIf="i == 0" style="max-width: 70%;" src="assets/images/3.png" /> </div> <div style="height: 50px;"> <p *ngIf="i === 0" class="padd">P1 <br /></p> <p *ngIf="i == 1" class="padd">P2</p> <p *ngIf="i == 2" class="padd">P3</p> </div> </div> </div>Intentaría deshabilitar la tarjeta al hacer clic en una, ¿cómo puedo hacerlo?
en la función goToProducts, debe configurar las tarjetas habilitadas en falso al final de la función tarjetas habilitadas = falso
Debe definir disabledCards en el nivel superior de su clase de componente
enabledCards = truey en goToProducts:
goToProducts(catalog) { if this.enabledCards { ...your code } this.disabledCards = true }pero debe pensar en el tiempo para configurar las tarjetas habilitadas en falso
Pruebe como este archivo HTML
<div *ngFor="let catalog of catalogs;let i=index" (click)="goToProducts(catalog)" > <div> <div class="name-position text {{catalog.classe}}" style="font-size: 21px;"> <img *ngIf="i == 1" style="max-width: 70%;" class="logo-catalog-header" src="assets/images/1.png"> <img *ngIf="i == 2" style="max-width: 70%;" src="assets/images/2.png" > <img *ngIf="i == 0" style="max-width: 70%;" src="assets/images/3.png" > </div> <div style="height: 50px"> <p *ngIf="i === 0" class="padd" disabled="disable">P1 <br> </p> <p *ngIf="i == 1" class="padd" disabled="disable">P2</p> <p *ngIf="i == 2" class="padd" disabled="disable">P3</p> </div> </div>archivo TS
disable = false; goToProducts(catalog){ this.disable = !this.disable; }