angular - 物料表只显示行不显示数据

Question

我错过了什么？我在我的响应中取回数据，并且表格正确显示只有 1 行正在返回。它显示一行但没有数据。

此外，控制台中没有错误。

响应数据 -

[{"vendorId":1,"company":"JagdeepTest","address":"123456789","phone":"1234567890","fax":null,"email":"[e-mail]","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>

零件 -

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);
      });
  }

}

服务 -

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');
  }

}

我在我的其他 Angular 应用程序中使用相同的技术并且它工作正常。这个是带有角模板的.netcore。请参阅图片链接中的材料表

材料表

标签： angularangular-material

Answer 1

Angular 方面没有问题，但 .NetCore 将 Json 中的键更改为小写。对核心 startup.cs 类进行以下更改，不会有问题。

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";
        });
    }