web-dev-qa-db-fra.com

Angular 2+ attr.disabled ne fonctionne pas pour div lorsque j'essaie d'itérer la boucle ngFor

Je travaille sur une application de réservation de rendez-vous, où j'affiche des créneaux horaires pour les rendez-vous en utilisant *ngFor en boucle.

html

<div *ngFor="let item of allTimeSlots">
    <div class="col-sm-3">
        <div class="choice" data-toggle="wizard-slot" [attr.disabled]="item.status" (click)="slotSelected($event)">
            <input type="radio" name="slot" value="{{item.timeSlot}}">
            <span class="icon">{{item.timeSlot}}</span> {{item.status}}
        </div>
    </div>
</div>

TypeScript

for (var index = 0; index < this.totalMinutes; index += 15, i++) {
  this.allTimeSlots[i] = new allTimeSlots("", false);

  this.allTimeSlots[i].timeSlot = (hour <= 12 ? hour : hour - 12) + ":" + (minute <= 9 ? ("0" + minute) : minute) + " " + ampm;
  this.bookedTimeSlots.forEach(element => {
    if (this.allTimeSlots[i].timeSlot == element) {
      this.allTimeSlots[i].status = true;
    }
  });
}

Voici une capture d’écran de plages horaires affichant true si la plage horaire est réservée et false si elles sont disponibles à des fins de débogage . enter image description here

Lorsque j'exécute ce code, aucune erreur n'est générée, mais tous les éléments div créés par *ngFor sont désactivés. J'ai essayé d'utiliser *ngIf au lieu de désactivé, cela fonctionne plutôt bien. Mais le problème est que je veux afficher si le créneau horaire est disponible ou non.

angulartypescriptngfor
3
Shreenil Patel

Disabled ne peut pas être utilisé pour un élément div et ne s'applique qu'aux éléments suivants

<button>    
<fieldset>  
<input> 
<keygen>    
<optgroup>  
<option>    
<select>    
<textarea>

Regarde ça

Donc, pour votre problème, vous pouvez le gérer en utilisant:

<div 
  class="choice" 
  data-toggle="wizard-slot" 
  [class.disabled]="item.status" 
  (click)="slotSelected($event)">
  <input 
    type="radio" 
    name="slot" 
    value="{{item.timeSlot}}" 
    [disabled]="item.status">
  <span class="icon">{{item.timeSlot}}</span> {{item.status}}
</div>

et vous devriez ajouter des styles 

.disabled {
  cursor: not-allowed;
}
6
Aravind

Utilisez [disabled] au lieu de [attr.disabled]

En effet, [attr.disabled]="false" va ajouter disabled="false" à l'élément qui, en HTML, désactivera toujours l'élément.

Syntaxe qui ne désactivera pas un élément

<button>Not Disabled</button>
<button [disabled]="false">Not Disabled</button>

Syntaxe qui désactivera un élément

<button disabled></button>
<button disabled="true"></button>
<button disabled="false"></button>
<button [attr.disabled]="true"></button>
<button [attr.disabled]="false"></button>
<button [disabled]="true"></button>

disabled désactivera un élément, que ce soit vrai ou faux, sa présence signifie que l'élément sera désactivé. Angular n'ajoutera pas l'élément disabled à [disabled]="variable" si variable est faux.

Comme vous l'avez mentionné dans votre commentaire, vous utilisez des éléments div et non des boutons, dont angulaire 2 ne reconnaît pas l'élément désactivé. Je recommanderais d'utiliser un bouton si vous souhaitez capturer des événements click, mais sinon, vous pourriez faire quelque chose comme:

<div [ngClass]="{ 'disabled': item.status }"></div>

et avoir une classe CSS pour montrer la plage horaire réservée.

Plus d'informations sur [ngClass] sont disponibles dans la documentation

6
0mpurdy

Comme 0mpurdy a répondu, vous devez utiliser l'attribut [disabled]. La variable ne doit pas nécessairement être un booléen, mais l'expression doit l'être.

Dans votre code, il détermine si item.status est une fausseté ou une vérité. Donc, si ce n'est pas null/NaN/undefined, vous obtiendrez "true" et la div sera désactivée.

Au lieu d'insérer une expression:

[disabled]="item.status === 'occupied'"

Modifier

Désolé, j'ai raté cela ... puisque vous ne pouvez pas désactiver un div, mettez l'attribut disabled à l'intérieur de la balise input.

<input type="radio" [disabled]="item.status === 'occupied'" name="slot" value="{{item.timeSlot}}">

puisque vous souhaitez afficher la sélection comme étant désactivée, vous devez l'insérer directement dans l'entrée. le bouton radio sera non cliquable et un 'curseur: non autorisé' s'affichera.

J'espère que cela pourra aider

0
deedsundone