1

マテリアル (2.0.0-beta.1) を使用する Angular 2 (2.4.3) アプリがあり、チェックボックスのバインディングに関するいくつかの問題に直面しています。

コンポーネントのブール値に従って条件付きでチェックされるチェックボックスが必要です。クリックすると、ブール値を切り替えたい。

だから私はこれをしました:

private _showName: boolean = true;

そしてHTMLで:

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

toggleName()のようになります。

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

これを使用して、チェックボックスをクリックすると:

  • bool_showNameは false に切り替えられます
  • ただし、チェックボックスはオンのままです

チェックボックスを2回目にクリックすると、チェックボックス自体がオフになり、ブール値が再びトグルされるため、ロジックが逆になります。

次のような文字列を使用して設定した場合[checked]:

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

最初のクリックでチェックボックスがオフになり、ブールが切り替えられますが、ブールにバインドする方法がありません。したがって、コンポーネントから bool を変更しても、チェックボックスには反映されません。

私はおそらく何か間違ったことをしているのですが、公式ドキュメントの「例」を見ても、どこが間違っているのかわかりません。

4

2 に答える 2