typescript - 當我嘗試迭代 ngFor 循環時，Angular 2+ 的 attr.disabled 對 div 無效

我正在開發一個預約預訂應用程式，我使用 *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 來取代 disabled，它運作得相當好。但問題是我想要顯示該時間段是否可用。

答案＃1

這樣使用：

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

只讀也是一樣。

答案＃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 會禁用一個元素，無論它是 true 還是 false，它的存在意味著該元素將被禁用。如果 variable 為 false，Angular 將完全不會為 [disabled]="variable" 添加 disabled 元素。

如你在評論中提到的，你正在使用 div 元素而不是按鈕，Angular 2 無法識別其 disabled 屬性。如果你要捕捉 click 事件，我建議使用按鈕；如果不是的話，你可以這樣做：

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

並有一個 CSS 類來顯示時間段已被預訂。

更多關於 [ngClass] 的資訊可以在文件中找到

答案＃3

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