时间戳

首页 > 解决方案 > Angular - MatTable 不显示数据

angular - Angular - MatTable 不显示数据

问题描述

我在显示从我的客户端获取的 JSON 对象之一的数据时遇到问题。我只看到标题数据。我不清楚我错过了什么。

我检查了客户端发送的JSON文件，很好。

TS 文件代码：

import { Component, OnInit, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-list-student',
  templateUrl: './list-student.component.html',
  styleUrls: ['./list-student.component.css']
})
export class ListStudentComponent implements OnInit {
    studentData: any;   
    headerColumns: string[] = ["FIRST_NAME", "LAST_NAME", "DOB_DATE"];
    dataSource = new MatTableDataSource([]);
    summaryTableConfig = [
        {
          'headerValue' : 'First Name', 
          'columnValue' : 'FIRST_NAME',
        },
        {
          'headerValue' : 'Last Name', 
          'columnValue' : 'LAST_NAME',
        },
        {
          'headerValue' : 'DOB', 
          'columnValue' : 'DOB_DATE',
        }
    ];
    
    constructor() { }

  ngOnInit() {
    this.studentData = {"header": {"columnsMap": {"DOB_DATE": "12/12/1942","FIRST_NAME": "JOHN","LAST_NAME": "DOE"}}};
    this.dataSource = new MatTableDataSource;
    this.dataSource.data = this.studentData;
  }
}

HTML 代码

                        <mat-table [dataSource]="dataSource">
                            <ng-container *ngFor="let data of summaryTableConfig" [matColumnDef]="data.columnValue">
                                <mat-header-cell *matHeaderCellDef>
                                    <span>{{ data.headerValue }}</span>
                                </mat-header-cell>
                                <mat-cell  *matCellDef="let element">
                                    <span>{{element["columnsMap"][data.columnValue]}}</span>
                                </mat-cell>
                            </ng-container>
                            <mat-header-row *matHeaderRowDef="headerColumns"></mat-header-row>
                            <mat-row *matRowDef="let row; columns: headerColumns;"></mat-row>
                        </mat-table>

呈现的表格的屏幕截图

标签： angulartypescriptdatasourcemat-table

解决方案

如果您检查错误日志，您应该看到“无法读取未定义的属性 'columnsMap'”。

这就是发生的事情。您使用以下命令初始化 studentData：

{"Students": 
  {"student": 
    [
      {"header": 
        {"columnsMap": 
          {"DOB_DATE": "12/12/1942","FIRST_NAME": "JOHN","LAST_NAME": "DOE"}
        }
      }
    ]
  }
}

然后通过 this.studentData["Students"]["student"]["header"]["columnsMap"] 遍历 studentData，相当于 this.studentData.Students.student.header.columnsMap。

问题是学生是一个数组。因此 this.studentData.Students.student.header 是未定义的，您无法读取未定义的 columnsMap。

要进行测试，您可以编写 this.studentData.Students.student[0].header.columnsMap。这应该会给你一个有 1 行的表。

推荐阅读