如何在 Angular 4 的材料设计表中添加复选框

Posted 2023-03-05

【中文标题】如何在 Angular 4 的材料设计表中添加复选框

【英文标题】：How to add a checkbox in a Material Design table in Angular 4

【发布时间】：2018-05-08 14:54:59

【问题描述】：

我想在 Angular 4 的 Material Design 表中添加一个复选框，它将位于 Publish 列下。问题是复选框在表格中不只显示文本和错误消息

“未指定名称属性的表单控件没有值访问器”

这是我的代码：

<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>

【问题讨论】：

[我通过将 name="fieldName" ngDefaultControl 属性添加到带有 [(ngModel)] 属性的元素中来修复此错误](***.com/a/47795277)

【参考方案1】：

发现了我从 angular.material.io 复制代码的问题，他们没有更新示例以使用最新版本的材料设计。所以我有下面的复选框代码：

<md-checkbox class="example-margin" [(ngModel)]="row.isPublish"> 
Checked </md-checkbox>

将 md 更改为 mat:

<mat-checkbox [checked]="row.isPublish"></mat-checkbox>

解决了问题。