2017-06-14 34 views
0

我在HTML中具有复选框如下,并希望有与在TS中可变双向绑定:角4,<md-checkbox>没有双向绑定

... 
     </md-grid-tile> 
     <md-grid-tile class="grid-box-row"> 
      <md-checkbox ng-model="item.exportable">{{item.exportable}} 
      </md-checkbox> 
     </md-grid-tile>   
    </div> 
    </ng-container> 
</md-grid-list> 

item.exportable是在TS中定义的布尔:

exportable: boolean; 

它是这个样子: enter image description here

没有check即使值为true。并且点击UI上的复选框不会影响复选框后显示的值。请求帮助。谢谢。


谢谢大家的回复。 加括号后和括号对:

 </md-grid-tile> 
     <md-grid-tile class="grid-box-row"> 
      <md-checkbox [(ng-model)]="item.exportable">{{item.exportable}} 
      </md-checkbox> 
     </md-grid-tile>   
    </div> 
    </ng-container> 
</md-grid-list> 

我得到这个错误:

Unhandled Promise rejection: Template parse errors: 
Can't bind to 'ng-model' since it isn't a known property of 'md-checkbox'. 
1. If 'md-checkbox' is an Angular component and it has 'ng-model' input, then verify that it is part of this module. 
2. If 'md-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" 
     </md-grid-tile> 
     <md-grid-tile class="grid-box-row"> 
      <md-checkbox [ERROR ->][(ng-model)]="item.exportable">{{item.exportable}} 
      </md-checkbox> 
     </md-grid-til 

我已经FormsModule在app.module.ts进口:

import {FormsModule} from '@angular/forms'; 

...

imports: [... 
FormsModule, 

而且我还添加FormsModule到component.ts:

import {FormsModule} from '@angular/forms'; 

什么我从'@角/材料的需求?

+0

确保'exportable'不只是因为是一个变量。如果你想使用'item.exportable'你不应该使用变量'exportable',它们是不一样的。同样如前所述,使用'[(ngModel)]','ng-model'是** AngularJS **语法! https://plnkr.co/edit/Xg9FvEW9TVwRk1YRIOJq?p=preview – Alex

回答

3

你可以做到这一点材料方式,而不使用ngModel

=器isChecked真实;

<md-checkbox 
      class="example-margin" 
      [checked]="isChecked" 
      [indeterminate]="indeterminate" 
      [align]="align" 
      (change)="isChecked = !isChecked" 
      [disabled]="disabled"> 
     I'm a checkbox 
     </md-checkbox> 

plunker https://plnkr.co/edit/xCpLFKzQnur9Si2KECiW?p=preview

+0

它适用于我。谢谢。 – brewphone

0

Angular中没有更多ng-model。您可以捕捉到click事件,请使用ReactiveForms模块,或使用更新的语法:

<md-checkbox [(ngModel)]="item.exportable"> 

为了使用ngModel,你需要导入FormsModule