Dav*_*Cyr 6 checkbox material-design angular-material2 angular
I would like to add a checkbox in a Material Design table in Angular 4, it would be under the column Publish. The problem is that the checkbox doesn't show in the table just the text with and error message
"No value accessor for form control with unspecified name attribute"

Here is my code:
<div class="mat-table-container mat-elevation-z8">
<mat-table #table [dataSource]="assessmentManualList">
<ng-container cdkColumnDef="documentID">
<mat-header-cell *cdkHeaderCellDef> </mat-header-cell>
<mat-cell *cdkCellDef="let row">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon><i class="material-icons">content_copy</i></mat-icon>
<span>Copy {{row.DocumentID}}</span>
</button>
<button mat-menu-item>
<mat-icon><i class="fa fa-trash" aria-hidden="true"></i></mat-icon>
<span>Delete {{row.documentID}}</span>
</button>
</mat-menu>
</mat-cell>
</ng-container>
<ng-container cdkColumnDef="textDetail">
<mat-header-cell *cdkHeaderCellDef> Document </mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row.textDetail}} </mat-cell>
</ng-container>
<ng-container cdkColumnDef="isPublish">
<mat-header-cell *cdkHeaderCellDef> Publish </mat-header-cell>
<mat-cell *cdkCellDef="let row">
{{row.isPublish}}
<md-checkbox class="example-margin" [(ngModel)]="row.isPublish">
Checked </md-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let row; columns: displayedColumns;" (click)="selectedRow(row)" [class.active]="isSelected(row)"></mat-row>
</mat-table>
</div>
Run Code Online (Sandbox Code Playgroud)
发现问题我从 angular.material.io 复制了代码,他们没有更新他们的示例以使用最新版本的材料设计。所以我有以下复选框代码:
<md-checkbox class="example-margin" [(ngModel)]="row.isPublish">
Checked </md-checkbox>
Run Code Online (Sandbox Code Playgroud)
将 md 更改为 mat:
<mat-checkbox [checked]="row.isPublish"></mat-checkbox>
Run Code Online (Sandbox Code Playgroud)
修复了问题。
| 归档时间: |
|
| 查看次数: |
20315 次 |
| 最近记录: |