角2 /材料2：チェックボックスでチェックされているバインド

Question

材料（2.0.0-beta.1）を使用した角2（2.4.3）のアプリがあり、チェックボックスのバインディングに関するいくつかの問題に直面しています。

コンポーネントのブール値に基づいて条件付きでチェックされたチェックボックスが必要です。クリックすると、ブールをトグルします。

だから私はこのでした：

private _showName: boolean = true; 

とHTMLで：私は、チェックボックスをクリックしたときに、これを使用して

toggleName(): void { 
    this._showName = !this._showName; 
    let ctrl = this._searchForm.get('name'); 
    ctrl.enabled ? ctrl.disable() : ctrl.enable(); 
} 

：

<md-checkbox (click)="toggleName()" [checked]="_showName"></md-checkbox> 

そしてtoggleName()は、次のようになりますし。

• ブール_showNameは偽
• に切り替えます。しかしチェックボックスが故に逆にロジックを残し、

二時間、私はそれが自分自身のチェックを外して、もう一度ブール値を切り替えるチェックボックスをクリックしてチェックされたままになります。

は、私はこのような文字列を使用して [checked]を設定した場合：

<md-checkbox (click)="toggleName()" [checked]="true"></md-checkbox> 

チェックボックスが最初のクリックで自分自身のチェックを外しとブールがトグルされていますが、今の私は、ブール値にバインドするための方法はありません。そのため、コンポーネントからboolを変更すると、チェックボックスに反映されません。

私は恐らく何か間違っていますが、 "例"を見ていますofficial documentationどこが間違っているのか分かりません。

Answer 1

私はそれが動作する、と思う：

<md-checkbox (click)="toggleName()" [attr.checked]="_showName"></md-checkbox> 

Answer 2

問題は、あなたはすぐにそれをチェックして、チェックを外していることです。結合[checked]を外し、toggleName()メソッド内this._showName = !this._showName;をしない：

toggleName(): void { 
    let ctrl = this._searchForm.get('name'); 
    ctrl.enabled ? ctrl.disable() : ctrl.enable(); 
} 

にテンプレート：

<md-checkbox (click)="toggleName()"></md-checkbox> 

をあなたはそれを自動的にチェックし、チェックを外しますクリックします。しかし、このチェックボックスをオフにするか、this._showNameを設定して再度チェックします。

Answer 3

最も良い方法は、変数をmd-checkboxコントロールでデータにバインドすることです。

素材部品

 <md-checkbox [(ngModel)]="_showName">{{_showName }} 

は良いドキュメントとplunker例が付属しています。ここでそれらを見つける方法は How to open examples in plunkerです。また

あなたがクリックした場合、「<」またはページ上でありながら、「>」、あなたがソースコードを閲覧することができます