当我尝试迭代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>

打字稿

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。

当我运行此代码时，它不会抛出任何错误，但div创建的所有*ngFor元素都被禁用。我尝试使用*ngIf而不是禁用，它的效果非常好。但问题是我想显示时隙是否可用。

Answer 1

禁用不能用于div元素，仅适用于以下元素

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

See this

因此，对于您的问题，您可以使用以下方法处理它：

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

Answer 2

使用[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将禁用一个元素，无论它是真还是假，它的存在意味着该元素将被禁用。如果disabled为假，Angular将不会为[disabled]="variable"添加variable元素。

正如您在评论中提到的，您使用的是div元素而不是按钮，其中angular 2无法识别已禁用的元素。如果您要捕捉click事件，我建议使用按钮但如果不是，您可以执行以下操作：

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

并有一个CSS类来显示预订的时间段。

有关[ngClass]的更多信息，请访问the documentation

Answer 3

CSS

.disabled-contenct {
  pointer-events: none;
  opacity: 0.4;
}

HTML

<div [class.disabled-contenct]="!isDisabledContent"></div>

TS

isDisabledContent: boolean;

那么你可以随时切换isDisabledContent。

Answer 4

正如0mpurdy回答的那样，你应该使用[disabled]属性。变量不必是布尔值，但表达式应该是。

在您的代码中，它确定item.status是假的还是真的。因此，如果它不是null / NaN / undefined，你将得到“true”并且div将被禁用。

而是插入一个表达式：

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

---

编辑

对不起，我错过了。由于无法禁用div，因此将disabled属性放在输入标记内。

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

由于您希望将选择显示为已禁用，因此您需要将其直接放在输入中。单选按钮将无法点击，并显示“光标：不允许”。

希望有所帮助

Answer 5

用这种方式：

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

同样适用于readonly。