title: Material Table only display row but no data
body: <p>What am I missing? i am getting data back in my response and table correctly showing only 1 row is returning. it shows one row but no data.</p>
  
  <p>Also, there is no error in console.</p>
  
  <p>Response data -</p>
  
  <pre><code>[{"vendorId":1,"company":"JagdeepTest","address":"123456789","phone":"1234567890","fax":null,"email":"jagdeeptanwar89@gmail.com","website":null,"notes":null,"paymentTerms":null,"nameOnCheque":null,"accountNumber":null,"currency":null,"contact":null,"enteredBy":null,"dateEntered":"2019-07-20T11:13:30.307"}]
  </code></pre>
  
  <p>HTML - </p>
  
  <pre><code>&lt;div&gt;
    &lt;mat-table [dataSource]="dt_Vendors" class="mat-elevation-z5" matSortDisableClear&gt;
  
      &lt;ng-container matColumnDef="Company"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Company &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.Company}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Address"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Address &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.Address}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Phone"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Phone &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.Phone}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Email"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Email &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.Email}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="PaymentTerms"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Payment Terms &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.PaymentTerms}} &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 element"&gt; {{element.Currency}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Contact"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Contact &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.Contact}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Add"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;
          &lt;button mat-button&gt;&lt;mat-icon&gt;add_circle&lt;/mat-icon&gt;&lt;/button&gt;
        &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;
          &lt;button mat-button [matMenuTriggerFor]="menu"&gt;&lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;&lt;/button&gt;
          &lt;mat-menu #menu="matMenu"&gt;
            &lt;button mat-menu-item&gt;&lt;mat-icon&gt;edit&lt;/mat-icon&gt;Edit&lt;/button&gt;
          &lt;/mat-menu&gt;
        &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns_Vendors"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns_Vendors;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component -</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  import { MatSnackBar } from '@angular/material/snack-bar';
  import { Router } from '@angular/router';
  import { Vendors } from '../Models'
  import { ApiService } from '../Services';
  import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
  
  
  @Component({
    selector: 'app-vendors',
    templateUrl: './vendors.component.html',
    styleUrls: ['./vendors.component.css']
  })
  export class VendorsComponent implements OnInit {
    snackBarRef: any;
    dt_Vendors: MatTableDataSource&lt;Vendors&gt;;
    displayedColumns_Vendors = ['Company', 'Address', 'Phone', 'Email', 'PaymentTerms', 'Currency','Contact', 'Add'];
  
    constructor(
      private _formBuilder: FormBuilder,
      public dialog: MatDialog, public snackBar: MatSnackBar, private router: Router, private _apiService: ApiService
    ) {
      router.events.subscribe((value) =&gt; {
        console.log('Route changed: ' + value);
        if (this.snackBarRef !== undefined) {
          console.log('dismiss');
          this.snackBarRef.dismiss();
        }
      });
    }
  
    ngOnInit()
    {
      this.LoadVendors();
    }
  
    openSnackBar(message: string) {
      this.snackBarRef = this.snackBar.open('ERROR: ' + message, 'Close', {
        // duration: 60000,
      });
      this.snackBarRef.onAction().subscribe(() =&gt; {
        console.log('The snack-bar action was triggered!');
        this.snackBarRef.dismiss();
      });
    }
  
    LoadVendors() {
      this._apiService.getVendors()
        .subscribe(Result =&gt; {
          this.dt_Vendors=new MatTableDataSource(Result);
        });
    }
  
  }
  </code></pre>
  
  <p>Service - </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
  import { Observable, throwError } from 'rxjs';
  import { catchError, retry } from 'rxjs/operators';
  import { Vendors } from '../Models'
  
  //ng build --prod --base-href=/DPQuotation/
  
  @Injectable()
  export class ApiService {
    constructor(private httpC: HttpClient) { }
  
    getVendors(): Observable&lt;Vendors[]&gt; {
       return this.httpC.get&lt;Vendors[]&gt;('https://localhost:44383/GetVendors');
    }
  </code></pre>
  
  <p>}</p>
  
  <p>I am using same technique in my other angular APPS and its working fine. This one is  .netcore with angular template. See Material table in image link</p>
  
  <p><a href="https://i.stack.imgur.com/4ApMm.png" rel="nofollow noreferrer">Material Table</a></p>