Question

我无法显示本地服务器上的数据。

客户端确实请求，服务器从csv文件中获取数据。数据将作为json发送。我尝试解析MatTableDataSource数据并将其显示在表中。

表似乎没有数据，但是您可以在日志中看到数据。

带有打字稿代码的文件

personal-list.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../core/api.service';

import { MatTableDataSource } from '@angular/material/table';

export interface PersonalList {
  Name: string;
  Position: string;
}

@Component({
  selector: 'app-personal-list',
  templateUrl: './personal-list.component.html',
  styleUrls: ['./personal-list.component.css']
})
export class PersonalListComponent implements OnInit {
  displayedColumns: string[] = ['name', 'position'];
  dataSource;
  person;

  personal: PersonalList[];
  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.apiService.getPersonalList().subscribe((data: PersonalList[]) => {
      console.log(data);
      this.dataSource = new MatTableDataSource(data);
      console.log(this.dataSource);
    });
    console.log(this.dataSource);
  }

}

带有HTML代码的文件 personal-list.component.html

<p>personal-list works!</p>

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.Name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="position">
        <mat-header-cell *matHeaderCellDef>Position</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.Position}} </mat-cell>
    </ng-container>

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

Screenshot with the table and console outputs

Answer 1

尚未从服务器直接发送数据。

我更改了data = pandas.read_csv('./Data/personal.csv').loc[:, ['Name', 'Position']].to_json()

到

data = pandas.read_csv('./Data/personal.csv').loc[:, ['Name', 'Position']].to_json(orient='records')

方法to_json将定向的“列”作为默认值。

https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.to_json.html

Angular Material Table不显示从本地服务器获取的数据

1 个答案: