Question

目前，我有以下代码来填充表格。

在component.ts中：

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { MatTableDataSource } from "@angular/material/table";

@Component({
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class MyRouteData {
  employeeInfoTable: object;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("http://localhost:5000/MyRoute/GetEmployeeInfo")
      .subscribe(response => {
        this.employeeInfoTable = response;
      });
  }
}

我的template.html文件如下：

<mat-card style="height: 98%">
  <div style="height: 95%; overflow: auto;">
      <table class="MyNiceStyle">
        <thead>
          <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Date Of Birth</td>
            <td>Address</td>
            <td>Postcode</td>
            <td>Gender</td>
            <td>Salary</td>
            <td>Job Title</td>
          </tr>
        </thead>

        <tr *ngFor="let data of employeeInfoTable">
          <td>{{data.Name}}</td>
          <td>{{data.Age}}</td>
          <td>{{data.DateOfBirth}}</td>
          <td>{{data.Address}}</td>
          <td>{{data.Postcode}}</td>
          <td>{{data.Gender}}</td>
          <td>{{data.Salary}}</td>
          <td>{{data.JobTitle}}</td>
      </table>
    </div>

</mat-card>

可以工作，但说实话，它看起来很糟糕。我想做的就是使用席子表：https://material.angular.io/components/table/examples

我已将template.html更新为：

<mat-card style="height: 98%">
    <table mat-table [dataSource]="employeeInfoTable" class="mat-elevation-z8">
        <ng-container matColumnDef="Name">
            <th mat-header-cell *matHeaderCellDef>Name </th>
            <td mat-cell *matCellDef="let element"> {{element.Name}} </td>
        </ng-container>
        <ng-container matColumnDef="DateOfBirth">
            <th mat-header-cell *matHeaderCellDef> DateOfBirth </th>
            <td mat-cell *matCellDef="let element"> {{element.DateOfBirth}} </td>
        </ng-container>
        <ng-container matColumnDef="Address">
            <th mat-header-cell *matHeaderCellDef> Address </th>
            <td mat-cell *matCellDef="let element"> {{element.Address}} </td>
        </ng-container>
        <ng-container matColumnDef="Postcode">
            <th mat-header-cell *matHeaderCellDef> Postcode </th>
            <td mat-cell *matCellDef="let element"> {{element.Postcode}} </td>

        <ng-container matColumnDef="Gender">
            <th mat-header-cell *matHeaderCellDef> Gender </th>
            <td mat-cell *matCellDef="let element"> {{element.Gender}} </td>
        </ng-container>
        <ng-container matColumnDef="Salary">
            <th mat-header-cell *matHeaderCellDef> Salary </th>
            <td mat-cell *matCellDef="let element"> {{element.Salary}} </td>
        </ng-container>
        <ng-container matColumnDef="JobTitle">
            <th mat-header-cell *matHeaderCellDef> JobTitle </th>
            <td mat-cell *matCellDef="let element"> {{element.JobTitle}} </td>
        </ng-container>

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

当我运行它时，我只看到一个空白屏幕。没有控制台错误或类似的东西。我需要对template.html和/或component.ts进行哪些更改才能显示数据？

Answer 1

您需要进行这些更改。

在component.ts中：

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { MatTableDataSource } from "@angular/material";
import { Object} from "../object.model";

@Component({
   styleUrls: ["./styles.scss"],
   templateUrl: "./template.html"
})
export class MyRouteData implements OnInit {
   employeeInfoTable : Object[] = [];
   employeeInfoTableDataSource = new MatTableDataSource(this.employeeInfoTable);
   displayedColumns: string[] = [
     "Name",
     "DateOfBirth",
     "Address",
     "Postcode",
     "Gender",
     "Salary"
     "JobTitle"
  ];

   constructor(private http: HttpClient) {}

   ngOnInit() {
      this.http.get("http://localhost:5000/MyRoute/GetEmployeeInfo")
          .subscribe(response => {
             this.employeeInfoTable = response;
             this.employeeInfoTableDataSource.data = this.employeeInfoTable;
      });
   }
}

在object.model.ts

export interface Object{
   id: number;
   Name: string;
   DateOfBirth: Date;
   Address: string;
   Postcode: string;
   Gender: string;
   Salary : number;
   JobTitle : string;
}

在您的.html

中

<mat-card style="height: 98%">
  <table mat-table [dataSource]="employeeInfoTableDataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef>Name </th>
        <td mat-cell *matCellDef="let element"> {{element.Name}} </td>
    </ng-container>
    <ng-container matColumnDef="DateOfBirth">
        <th mat-header-cell *matHeaderCellDef> DateOfBirth </th>
        <td mat-cell *matCellDef="let element"> {{element.DateOfBirth}} </td>
    </ng-container>
    <ng-container matColumnDef="Address">
        <th mat-header-cell *matHeaderCellDef> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.Address}} </td>
    </ng-container>
    <ng-container matColumnDef="Postcode">
        <th mat-header-cell *matHeaderCellDef> Postcode </th>
        <td mat-cell *matCellDef="let element"> {{element.Postcode}} </td>

    <ng-container matColumnDef="Gender">
        <th mat-header-cell *matHeaderCellDef> Gender </th>
        <td mat-cell *matCellDef="let element"> {{element.Gender}} </td>
    </ng-container>
    <ng-container matColumnDef="Salary">
        <th mat-header-cell *matHeaderCellDef> Salary </th>
        <td mat-cell *matCellDef="let element"> {{element.Salary}} </td>
    </ng-container>
    <ng-container matColumnDef="JobTitle">
        <th mat-header-cell *matHeaderCellDef> JobTitle </th>
        <td mat-cell *matCellDef="let element"> {{element.JobTitle}} </td>
    </ng-container>

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

Answer 2

您需要对Component.ts文件进行2次更改：

1）为“ displayedColumns”添加定义。（请注意，您的表有2个“邮政编码”列，这是不允许的，我已从displayColumns定义中删除了其中一列。也请从html表中将其删除。）

public displayedColumns = ['Name', 'DateOfBirth', 'address', 'Postcode', 'Gender', 'Salary', 'JobTitle', 'inbound', 'ping_time'];

2）将响应分配给employeeInfoTable作为MatTableDataSource。分开处理行时将需要它。

public employeeInfoTable: any;
this.employeeInfoTable = new MatTableDataSource<any>([...response]);;

在angular 7中，如何使用对象中的数据填充垫子表

2 个答案: