web-dev-qa-db-ja.com

Angular 4のマテリアルデザインテーブルにチェックボックスを追加する方法

Angular 4のマテリアルデザインテーブルにチェックボックスを追加したいのですが、それは[公開]列の下にあります。問題は、チェックボックスがテキストだけでテーブルに表示されないことです。とエラーメッセージ

「名前属性が指定されていないフォームコントロールの値アクセサーはありません」

これが私のコードです：

<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>
angularcheckboxmaterial-designangular-material2
5
David Cyr

マテリアルデザインの最新バージョンを使用するようにサンプルを更新していないangular.material.ioからコードをコピーした問題を見つけました。だから私はチェックボックスに次のコードを持っていました：

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

Mdをmatに変更しました：

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

問題を修正しました。

5
David Cyr