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

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

html

    

        

            
            {{item.timeSlot}} {{item.status}}
        
    

машинопись

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, если временной интервал записано и ложно, если доступно для отладки.

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