web-dev-qa-db-ja.com

Angular 2+ attr.disabledは、ngForループを反復しようとすると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を表示します。 enter image description here

このコードを実行してもエラーはスローされませんが、*ngForによって作成されたdiv要素はすべて無効になります。無効にする代わりに*ngIfを使用しようとしましたが、かなりうまく機能します。しかし、問題は、タイムスロットが使用可能かどうかを表示することです。

angulartypescriptngfor
8
Shreenil Patel

無効は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;
}
11
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は、要素がtrueかfalseかに関係なく要素を無効にします。存在するとは、要素が無効になることを意味します。 Angularは、disabledがfalseの場合、[disabled]="variable"に対してvariable要素をまったく追加しません。

コメントで述べたように、ボタンではなくdiv要素を使用していますが、これはangular 2は無効な要素を認識しません。ボタンを使用することをお勧めしますclickイベントをキャプチャする予定ですが、そうでない場合は次のようなことができます。

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

予約済みのタイムスロットを表示するCSSクラスがあります。

[ngClass]の詳細については、 ドキュメント

10
0mpurdy

CSS

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

HTML

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

TS

isDisabledContent: boolean;

その後、いつでもisDisabledContentを切り替えることができます。

4
Muhammed Moussa

この方法で使用：

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

同じことが読み取り専用です。

1
baHI

0mpurdyが答えたように、[disabled]属性を使用する必要があります。変数はブール値である必要はありませんが、式はそうである必要があります。

コードでは、item.statusが偽であるか真実であるかを判別します。したがって、null/NaN/undefinedでない場合、「true」を取得し、divは無効になります。

代わりに式を挿入します。

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

編集

すみません、見逃しました。 divを無効にできないため、inputタグ内にdisabled属性を配置します。

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

選択範囲を無効として表示するため、入力内に直接配置する必要があります。ラジオボタンはクリック不可になり、「cursor：not-allowed」が表示されます。

役立つことを願っています

0
deedsundone