Значение не отображается в таблице Angular

Question

Я использую Angular Material для создания таблицы для моего объекта

Вот класс для объекта

 export class Payment {
    Id: Number;
    AccountHolderId : String;
    AccountHolderName: String;
    PaymentDate: Date;
    Amount : Number;
    Currency : String;
    Status : Number;
    StatusDescription: String;
    Reason: String;
}

А вот фиктивные данные для моей таблицы

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

Мне нужно использовать его, чтобы показать в таблице

Вот мой код компонентов

      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() {
  }

}

А вот компонент View Code

<mat-table #table [dataSource]="dataSource">

  <ng-container matColumnDef="Id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let element">  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="AccountHolderId">
    <mat-header-cell *matHeaderCellDef> AccountHolderId </mat-header-cell>
    <mat-cell *matCellDef="let element">  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="AccountHolderName">
    <mat-header-cell *matHeaderCellDef> AccountHolderName </mat-header-cell>
    <mat-cell *matCellDef="let element">  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="PaymentDate">
    <mat-header-cell *matHeaderCellDef> PaymentDate </mat-header-cell>
    <mat-cell *matCellDef="let payment">  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let payment">  </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Currency">
    <mat-header-cell *matHeaderCellDef> Currency </mat-header-cell>
    <mat-cell *matCellDef="let payment">  </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Status">
    <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
    <mat-cell *matCellDef="let payment">  </mat-cell>
  </ng-container>
  <ng-container matColumnDef="StatusDescription">
    <mat-header-cell *matHeaderCellDef> StatusDescription </mat-header-cell>
    <mat-cell *matCellDef="let payment">  </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Reason">
    <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
    <mat-cell *matCellDef="let payment">  </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

</mat-table>

Он прекрасно работаети компонент рендеринга, но я вижу только имя столбца таблицы, но не вижу значения из массива.

Где моя проблема?

Answer 1

Поскольку я вижу, что вы ничего не привязываете к таблице, вы перепутали с оплатой и, добавив определение ячейки, измените шаблон следующим образом:

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort>      
  <ng-container matColumnDef="Id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Id}} </mat-cell>
  </ng-container>

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

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

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

  <ng-container matColumnDef="Amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Amount}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Currency">
    <mat-header-cell *matHeaderCellDef> Currency </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Currency}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Status">
    <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Status}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="StatusDescription">
    <mat-header-cell *matHeaderCellDef> StatusDescription </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.StatusDescription}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Reason">
    <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Reason}} </mat-cell>
  </ng-container>

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

STACKBLITZ DEMO