Material Table only display row but no data

Question

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.

Also, there is no error in console.

Response data -

[{"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"}]

HTML -

<div>
  <mat-table [dataSource]="dt_Vendors" class="mat-elevation-z5" matSortDisableClear>

    <ng-container matColumnDef="Company">
      <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Company}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Address">
      <mat-header-cell *matHeaderCellDef> Address </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Address}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Phone">
      <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Phone}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Email}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="PaymentTerms">
      <mat-header-cell *matHeaderCellDef> Payment Terms </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.PaymentTerms}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Currency">
      <mat-header-cell *matHeaderCellDef> Currency </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Currency}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Contact">
      <mat-header-cell *matHeaderCellDef> Contact </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Contact}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Add">
      <mat-header-cell *matHeaderCellDef>
        <button mat-button><mat-icon>add_circle</mat-icon></button>
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item><mat-icon>edit</mat-icon>Edit</button>
        </mat-menu>
      </mat-cell>
    </ng-container>

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

Component -

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<Vendors>;
  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) => {
      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(() => {
      console.log('The snack-bar action was triggered!');
      this.snackBarRef.dismiss();
    });
  }

  LoadVendors() {
    this._apiService.getVendors()
      .subscribe(Result => {
        this.dt_Vendors=new MatTableDataSource(Result);
      });
  }

}

Service -

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<Vendors[]> {
     return this.httpC.get<Vendors[]>('https://localhost:44383/GetVendors');
  }

}

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

Material Table

Answer 1

you used UpperCase for {{element.Company}} and other fields in html.

i move your code and change it in stackblitz.

Answer 2

There was no problem with Angular side but .NetCore changing the Keys in Json to lowercase. Make following change to the core startup.cs class and there will be no problem.

public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());

        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist/ClientApp";
        });
    }

Answer 3

You try this

class Vendors {
  vendorId: number;
  company: string;
  address: string;
  phone: number;
  ......
}

dt_Vendors: Vendors[] = [];

Or

    <ng-container matColumnDef="Email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element['email']}} </mat-cell>
    </ng-container>

Or

  LoadVendors() {
    this._apiService.getVendors()
      .subscribe(Result => {
        this.dt_Vendors=new MatTableDataSource(JSON.parse(Result));
      });
  }