Angular Material Table切换显示时报No value accessor错误如何解决？

Angular 的 [(ngModel)] 是专为表单控件设计的双向绑定指令，只有实现了 ControlValueAccessor 接口的元素/组件（比如 input、select、Angular Material 表单类组件）才支持该绑定。
你将 [(ngModel)] 绑定到了普通 <div> 元素上，div 不属于表单控件，没有对应的值访问器实现，因此框架解析绑定时就会抛出 No value accessor for form control with unspecified name attribute 错误。
另外这个绑定本身完全冗余：你通过 *ngIf="tableIsVisible" 控制显示隐藏，只需要单向读取该布尔值即可，不需要在 div 上做双向绑定。

直接删除 div 标签上多余的 [(ngModel)]="tableIsVisible" 属性即可，修改后的代码如下：

<div class="mat-elevation-z8 layout-container" *ngIf="tableIsVisible">
  <table mat-table [dataSource]="dataSourceTable">
    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">No.</th>
      <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="header"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"> </mat-paginator>
</div>

补充说明：如果后续需要对表单控件使用 ngModel 双向绑定，若控件处于 <form> 标签内，还需要同时给控件添加 name 属性，或是通过 [ngModelOptions]="{standalone: true}" 声明为独立表单控件。

内容的提问来源于stack exchange，提问作者denisiulian