我在angular2引导程序材料项目中为这个问题苦苦挣扎了2天.
我需要更改材料设计复选框:
我知道我可以使用实质性的单选按钮,但是在那种情况下,我还有另一个问题:我无法取消选中单选按钮.
因此,我需要启用唯一检查以及检查/取消检查功能.
我尝试了以下
>通过document.getElement.blablabla与dom进行交互
>角度2的dom插值
> Javascript功能
> jQuery函数
这是html的代码:
<div class="row">
<div class="col-lg-12">
<label>Ordini cliente</label>
<mat-table #table [dataSource]="dataSource">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row deFinition" -->
<!-- Select Column -->
<ng-container matColumnDef="Select">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let item"><mat-checkBox color="primary"></mat-checkBox></mat-cell>
</ng-container>
//OTHER COLUMNS ...
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
我的想法是将元素绑定到这样的click事件
<mat-cell *matCellDef="let item"><mat-checkBox (click)="foo()" color="primary"></mat-checkBox></mat-cell>
解决方法:
设置一个属性以跟踪选中了哪个.然后仅对所选的一项设置[已检查].例如,在这里,我使用ngFor索引进行跟踪:
<div *ngFor="let item of [1,2,3]; let i = index">
<mat-checkBox [checked]="selected === i" (change)="selected = i">Check me!</mat-checkBox>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。