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>

{{data.headerValue}
{{element[“columnsMap”][data.columnValue]}

---

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

下面是发生的情况。您可以使用以下命令初始化studentData：

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

然后通过此.studentData[“Students”][“student”][“header”][“columnsMap”]遍历studentData，它相当于此.studentData.Students.student.header.columnsMap

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

---

要进行测试，可以编写以下内容。studentData.Students.student[0]。header.columnsMap。这将为您提供一个一行的表格。

您可以为此创建stackblitz吗？我对angular非常陌生。创建您正在处理的示例代码。我无法将角度材质添加到stackblitz fork中，也无法添加您的代码Aeberhart，这很有效。我的错误是，我将以下数据获取到我的组件中，即此。studentData={“header”：{“columnsMap”：{“DOB_DATE”：“12/12/1942”，“FIRST_NAME”：“JOHN”，“LAST_NAME”：“DOE”}}；我更新了我的问题。没有，现在我只看到列标题。这个问题没有解决。请检查我的更新代码。