2017-06-14 43 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