it-swarm.com.ru

Angular 2+ attr.disabled не работает для div, когда я пытаюсь повторить цикл ngFor

Я работаю над приложением бронирования встреч, где я отображаю временные интервалы для встреч, используя *ngFor для цикла.

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>

Машинопись

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;
    }
  });
}

Вот снимок экрана временных интервалов, который отображает true, если временной интервал забронирован, и false, если он доступен для целей отладки. enter image description here

Когда я запускаю этот код, он не выдает никакой ошибки, но все элементы div, созданные *ngFor, отключены. Я попытался использовать *ngIf вместо отключенного, он работает довольно хорошо. Но проблема в том, что я хочу показать, доступен ли временной интервал или нет.

3
Shreenil Patel

Disabled нельзя использовать для элемента div, а только для следующих элементов

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

Видеть это

Так что для вашей проблемы, вы можете справиться с этим с помощью:

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

и вы должны добавлять стили 

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

Используйте [disabled] вместо [attr.disabled]

Это потому, что [attr.disabled]="false" добавит disabled="false" к элементу, который в html все равно отключит элемент

Синтаксис, который не будет отключать элемент

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

Синтаксис, который отключит элемент

<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 отключит элемент, является ли он истинным или ложным, его присутствие означает, что элемент будет отключен. Angular вообще не добавит элемент disabled для [disabled]="variable", если variable имеет значение false.

Как вы упомянули в своем комментарии, вы используете элементы div, а не кнопки, угол которых 2 не распознает отключенный элемент. Я бы порекомендовал использовать кнопку, если вы собираетесь захватывать click события, но если нет, вы можете сделать что-то вроде:

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

и иметь класс CSS, чтобы показать временной интервал как забронировано.

Более подробная информация о [ngClass] доступна в документации

6
0mpurdy

В ответ на 0mpurdy вы должны использовать атрибут [disabled]. Переменная не должна быть логической, но выражение должно.

В вашем коде он определяет, является ли item.status ложным или правдивым. Так что, если это не ноль/NaN/undefined, вы получите «true» и div будет отключен.

Вместо этого вставьте выражение:

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


Правка

Извините, я пропустил это . Поскольку вы не можете отключить div, поместите атрибут disabled в тег ввода.

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

так как вы хотите отобразить выделение как отключенное, вам нужно поместить его непосредственно во вход. переключатель будет неактивным, и появится курсор: не разрешено.

Надеюсь, это поможет

0
deedsundone