Angular 4，<md-checkbox>没有双向绑定

Question

我在HTML中有一个复选框，如下所示，希望与ts中的变量进行双向绑定：

...
        </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;

显示如下：

即使值为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

我在app.module.ts中导入了FormsModule：

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

...

imports: [...
FormsModule,

我还将FormsModule添加到component.ts：

中

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

我需要'@ angular / material'吗？

Answer 1

您可以在不使用 ngModel

的情况下实现此材料方式

isChecked = true;

<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

Answer 2

Angular中不再有@-webkit-keyframes zoom { from { background-size: auto 100%; } to { background-size: auto 120%; } } 。您可以捕获ng-model事件，使用click模块，也可以使用更新的语法：

ReactiveForms

要使用<md-checkbox [(ngModel)]="item.exportable"> ，您需要导入ngModel。