title: Value not rendering in table Angular
body: <p>I using Angular Material to create a table for my object</p>
  
  <p>Here is a class for the object</p>
  
  <pre><code> export class Payment {
      Id: Number;
      AccountHolderId : String;
      AccountHolderName: String;
      PaymentDate: Date;
      Amount : Number;
      Currency : String;
      Status : Number;
      StatusDescription: String;
      Reason: String;
  }
  </code></pre>
  
  <p>And here is mock data for my table</p>
  
  <pre><code>import { Payment } from "./payment";
  
  export const PAYMENTS : Payment [] =  [
      {
      'Id': 832321,
      'AccountHolderId': '15651',
      'AccountHolderName': 'Alex Dumsky',
      'PaymentDate': new Date('2015-01-23T18:25:43.511Z'),
      'Amount': 445.12,
      'Currency': 'UAH',
      'Status': 0,
      'StatusDescription': 'Pending',
      'Reason': null
      }
  ];
  </code></pre>
  
  <p>I need to use it to show in table</p>
  
  <p>Here is my components code</p>
  
  <pre><code>      import { Component, OnInit } from '@angular/core';
      import {MatTableDataSource} from '@angular/material';
      import { PAYMENTS } from "./payments-mock"
  
      @Component({
        selector: 'app-payments',
        templateUrl: './payments.component.html',
        styleUrls: ['./payments.component.scss']
      })
      export class PaymentsComponent implements OnInit {
  
        //payments = PAYMENTS;
        displayedColumns = ['Id', 'AccountHolderId', 'AccountHolderName', 'PaymentDate','Amount','Currency','Status','StatusDescription','Reason'];
        dataSource = new MatTableDataSource(PAYMENTS);
        constructor() { }
  
        ngOnInit() {
        }
  
      }import { Component, OnInit } from '@angular/core';
  import {MatTableDataSource} from '@angular/material';
  import { PAYMENTS } from "./payments-mock"
  
  @Component({
    selector: 'app-payments',
    templateUrl: './payments.component.html',
    styleUrls: ['./payments.component.scss']
  })
  export class PaymentsComponent implements OnInit {
  
    //payments = PAYMENTS;
    displayedColumns = ['Id', 'AccountHolderId', 'AccountHolderName', 'PaymentDate','Amount','Currency','Status','StatusDescription','Reason'];
    dataSource = new MatTableDataSource(PAYMENTS);
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>And here is component View Code</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource"&gt;
  
    &lt;ng-container matColumnDef="Id"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Id &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="AccountHolderId"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; AccountHolderId &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="AccountHolderName"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; AccountHolderName &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="PaymentDate"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; PaymentDate &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let payment"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="Amount"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Amount &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let payment"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="Currency"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Currency &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let payment"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="Status"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Status &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let payment"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="StatusDescription"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; StatusDescription &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let payment"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="Reason"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Reason &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let payment"&gt;  &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
  
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>It works great and the component is rendering, but I see only table columns name, but don't see values from array. </p>
  
  <p>Where is my trouble?</p>