角2 [無効]を使用した双方向バインディング

Question

別の入力のngModelに応じて、[disabled]という入力があります。最初は[disabled]が正常に動作していますが、従属入力値を変更しても、[disabled]プロパティは機能しません。 [disabled]プロパティに2つのバインディングを適用するにはどうすればいいですか？

以下はコードスニペットです。

<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event"> 
<option value="0">Disabled</option> 
<option value="0">Enabled</option> 
</select> 

このモデルisDisabledが正しく変更されます。テンプレート{{isDisabled}}でこのような値の変化を見ることができました。しかし、選択ボックスの[disabled]プロパティには反映されません。

<select [ngModel]="userInput" [disabled]="isDisabled"> 
<option value="test">Test</option> 
</select> 

Answer 1

主な問題は、両方のオプションに同じvalue 0を使用していたでした。しかし、Enable & Disableについては、それぞれ1 & 0に変更した場合でも、 value属性の値が'0'（文字列 '0'）& '1'（文字列）（短い文字列値）の値を格納するため、これは機能しません。

ngValue属性バインディングを使用すると、この値のデータ型の問題を簡単に解決できます。あなたの質問に

<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event"> 
    <option [ngValue]="1">Disabled</option> 
    <option [ngValue]="0">Enabled</option> 
</select> 

Plunker Demo

Answer 2

入力に名前属性を追加し、括弧で囲んでngモードの双方向バインディングを作成する必要があります。 [disabled]ためtrue\falseを使用してみてください

<select [(ngModel)]="isDisabled" name='isDisabled'> 
     <option value="0">Disabled</option> 
     <option value="1">Enabled</option> 
</select> 
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'> 
     <option value="test">Test</option> 
</select> 

Answer 3

この目的のためにngModelChangeを使用する必要が、それはあなたの関数のコンパレータを保存していない、と直接結合2ウェイを使用します。

同様：

<select [(ngModel)]="isDisabled"> 
     <option value="true">Disabled</option> 
     <option value="false">Enabled</option> 
</select> 

<select [ngModel]="userInput" [disabled]="isDisabled"> 
    <option value="test">Test</option> 
</select> 

See Plunker

Answer 4

、両方のオプション値は0です。

あなたが他のものfalse

---

コンポーネントと、その1はtrueであることを確認するとよいでしょう：

component class { 
    myVar = false 
} 

テンプレート：

<select [(ngModel)]="myVar"> 
    <option value="true">...</option 
    <option value="false">...</option 
</select> 

<select [disabled]="myVar"> 
    <option>...</option 
</select>