Table mat-table does not render in browser with Angular 6

Question

In the browser debug caught this error(screenshot):

This is my page html (test)

<div>
  <label>Nome:
    <input [(ngModel)]="operator.Name" placeholder="Nome">
  </label>
</div>
<div>
  <label>Versão:
    <input [(ngModel)]="operator.Version" placeholder="Versão">
  </label>
</div>

<div>
  <table mat-table >
      <ng-container matColumnDef="Nome">
          <th mat-header-cell *matHeaderCellDef> Nome </th>
          <th mat-header-cell *matHeaderCellDef> Versão </th>
          <td mat-cell *matCellDef="let user"> {{operator.Name}} </td>
          <td mat-cell *matCellDef="let user"> {{operator.Version}} </td>
        </ng-container>

  </table>
</div>

This is my module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { OperatorsComponent } from './operators/operators.component';

import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, 
         MatSortModule, MatTableModule } from '@angular/material';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    OperatorsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and this is my custom component

import { Component, OnInit } from '@angular/core';
import { Operator } from '../operator';

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css']
})
export class OperatorsComponent implements OnInit {

  operator: Operator = 
  {
    Id:'AAAAAAABBNNYYTT454545MNJ',
    Name: 'Paulo Silva',
    Version: '1.0.4.3'
  }

  constructor() { }

  ngOnInit() {
  }

}

What should I do to render the table and display the values?

Answer 1

I decided as follows: my html

<div>
  <table mat-table [dataSource] = "operators">

      <ng-container matColumnDef="Codigo">
          <th mat-header-cell *matHeaderCellDef> Codigo </th>
          <td mat-cell *matCellDef="let oper"> {{oper.Id}} </td>
        </ng-container>

    <ng-container matColumnDef="Nome">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let oper"> {{oper.Name}} </td>
    </ng-container>

    <ng-container matColumnDef="Versão">
      <th mat-header-cell *matHeaderCellDef> Versão </th>
      <td mat-cell *matCellDef="let oper"> {{oper.Version}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
  </table>
</div>

my Component

import { Component, OnInit } from '@angular/core';
import { Operator } from '../operator';

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css']
})
export class OperatorsComponent implements OnInit {

  operator: Operator = 
  {
    Id:'AAAAAAABBNNYYTT454545MNJ',
    Name: 'Paulo Silva',
    Version: '1.0.4.3'
  };
  operators: Array<Operator> = 
  [
   {
      Id:'AAAAAAABBNNYYTT454545MNJ',
      Name: 'Paulo Silva',
      Version: '1.0.4.3'
    },
    {
      Id:'AAAAAAABBNNYYTT454545MNJ',
      Name: 'Augustus Caeser',
      Version: '1.0.4.3'
    },
   {
      Id:'AAAAAAABBNNYYTT454545MNJ',
      Name: 'Karl Marx',
      Version: '1.0.4.3'
    }
  ];    
  columnsToDisplay = ['Codigo','Nome', 'Versão'];    
  constructor() { }    
  ngOnInit() {
  }    
}

with that I settled the deal