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

}

这是组件查看代码

<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

值未在表Angular中呈现

1 个答案: