Angular Таблица материалов не отображает извлеченные данные с локального сервера - PullRequest
Новая
       21

Angular Таблица материалов не отображает извлеченные данные с локального сервера

1 голос
/ 03 марта 2020

Я не могу отобразить данные с локального сервера.

Клиент делает запрос, сервер берет данные из файла 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>

Снимок экрана с выходами таблицы и консоли

1 Ответ

0 голосов
/ 03 марта 2020

Данные не были отправлены прямо с сервера.

Я изменил 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

...