Question

我正在使用角度材质数据表将动态列和行加载到UI中。读取要以表格格式显示在UI中的数据后，来源基本上是不同的CSV文件。

来自服务器的atat数据将如下所示： {“列”：[“性别”，“年龄”，“地址”，“ famsize”]，“行”：[{“性别”：“ F”，“年龄”：18，“地址”： “ U”，“ famsize”：“ GT3”}，{“ sex”：“ F”，“ age”：17，“ address”：“ U”，“ famsize”：“ GT3”}，{“ sex”： “ F”，“年龄”：15，“地址”：“ U”，“ famsize”：“ LE3”}，{“性别”：“ F”，“年龄”：15，“地址”：“ U”， “ famsize”：“ GT3”}，{“ sex”：“ F”，“ age”：16，“ address”：“ U”，“ famsize”：“ GT3”}]}

组件HTML ：

<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
    <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
    <mat-cell *matCellDef="let element "> {{element[disCol]}} </mat-cell>
  </ng-container>

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

组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DatasetService } from '../../services/dataset.service';
import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnInit {
  id: string;
  dataSource: SummaryDataSource;
  displayedColumns: string[];

  constructor(private route: ActivatedRoute, private datasetSetvice: DatasetService) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    // TODO: Not sure how to initialize columns, so setting static value for not
    this.displayedColumns = ['school', 'sex'];
    this.dataSource = new SummaryDataSource(this.datasetSetvice, this.id);
    console.log(this.dataSource);
  }

}

export class SummaryDataSource extends DataSource<any> {
  constructor(private datasetSetvice: DatasetService, private dataset_id: string) {
    super();
  }

  connect(): Observable<any> {
    return this.datasetSetvice.getSummary(this.dataset_id);
  }

  disconnect() { }
}

Service.ts ：

getSummary(id: string): Observable<any> {
    return this.http.get(this.rootURL + "/datasets/summary/" + id);
}

这是行不通的，我对棱角还很陌生。任何帮助都是非常明显的。

将动态服务器端数据加载到角度材料数据表中

0 个答案: