テンプレートの変数を角2で宣言する

Question

私は、ユーザが色を選択するために使用する入力のタイプを選択する機会を与えたいと思っています。type='text'またはtype='color'です。

<input [type]="colorInputTypeText ? 'text' : 'color'"> 
<input type="checkbox" [(ngModel)]="colorInputTypeText" name="colorInputTypeText"> 

そしてmy-component.ts中：が、それはオールライトMyComponentクラスのフィールドとしてcolorInputTypeTextを宣言することで、または私は何とかそれを宣言する必要があります

@Component({ 
    ... 
}) 
export class MyComponent { 
    colorInputTypeText = true; 
    ... 
} 

私の質問があるので、私はこのテンプレートを書きましたテンプレート内でローカル？正解が「テンプレート内」であれば、その方法は？

ありがとうございました。

Answer 1

注：この回答は@Bernardo Pachecoからインスパイアされています。だから、彼の答えをupvoteすることを忘れないでください。ここで

がソリューションです：

<input [type]="cb.checked ? 'color' : 'text'" id="color" name="color"> 
<input type="checkbox" name="inputTypeColor" checked #cb [(ngModel)]="cb.checked"> 

Answer 2

クラスのフィールドを宣言するのに問題はありません。

しかし、あなたはあなたのクラスに触れることをしたくない場合は、あなただけのテンプレートでそれを行うことができます。

<input [type]="colorInputTypeText ? 'text' : 'color'"> 

<input type="checkbox" name="colorInputTypeText" #cb (change)="colorInputTypeText = cb.checked"> 

角度は、ボンネットの下にあなたのためのcolorInputTypeTextを作成します。

colorInputTypeTextはブール変数です。デフォルトではfalseなので、チェックボックスはオフになっています。あなたのクラスは、余分なプロパティを宣言する必要はありませんし、テンプレート内のロジックがあるので、私はこのソリューションを好む個人的に

<input type="checkbox" name="colorInputTypeText" checked #cb (change)="colorInputTypeText = cb.checked"> 

：デフォルト値はtrueに等しい場合は、このようなchecked属性を追加する必要があります理解しやすい。