当我尝试迭代 ngFor 循环时，Angular 2+ attr.disabled 不适用于 div

Question

我正在开发一个约会预订应用程序，我在其中使用 *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>

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

这是时间段的屏幕截图，如果时间段已预订，则显示 true，如果可用于调试目的，则显示 false。

当我运行这段代码时，它没有抛出任何错误，但是 *ngFor 创建的所有 div 元素都被禁用了。我尝试使用 *ngIf 而不是禁用，它工作得很好。但问题是我想显示时间段是否可用。

Answer 1

这样使用:

[attr.disabled]="isDisabled ? '' : null"

同样适用于只读。