在 angular 7 中,如何使用来自对象的数据填充 mat-table [英] In angular 7 , How do I populate a mat-table with a data from an object
问题描述
目前我有以下代码来填充表格.
在 component.ts 中:
import { HttpClient } from "@angular/common/http";从@angular/core"导入 { Component, OnInit };从@angular/forms"导入 { FormBuilder, FormGroup, Validators };从@angular/router"导入 { ActivatedRoute, Router };从@angular/material/table"导入 { MatTableDataSource };@成分({styleUrls: ["./styles.scss"],templateUrl: "./template.html"})导出类 MyRouteData {员工信息表:对象;构造函数(私有 http:HttpClient){}ngOnInit() {这个.http.get("http://localhost:5000/MyRoute/GetEmployeeInfo").订阅(响应=> {this.employeeInfoTable = 响应;});}}
我的 template.html 文件如下所示:
<div style="height: 95%; overflow: auto;"><table class="MyNiceStyle"><头><tr><td>姓名</td><td>年龄</td><td>出生日期</td><td>地址</td><td>邮政编码</td><td>性别</td><td>薪水</td><td>职位</td></tr></thead><tr *ngFor="让员工信息表的数据"><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>
</mat-card>
它有效,但老实说,它看起来很糟糕.我想做的是使用mat-table:https://material.angular.io/components/table/examples一个>
我已将 template.html 更新为:
<table mat-table [dataSource]="employeeInfoTable" class="mat-elevation-z8"><ng-container matColumnDef="名称"><th mat-header-cell *matHeaderCellDef>名称</th><td mat-cell *matCellDef="let element">{{element.Name}} </td></ng-容器><ng-container matColumnDef="DateOfBirth"><th mat-header-cell *matHeaderCellDef>出生日期</th><td mat-cell *matCellDef="let element">{{element.DateOfBirth}} </td></ng-容器><ng-container matColumnDef="地址"><th mat-header-cell *matHeaderCellDef>地址</th><td mat-cell *matCellDef="let element">{{element.Address}} </td></ng-容器><ng-container matColumnDef="邮政编码"><th mat-header-cell *matHeaderCellDef>邮政编码</th><td mat-cell *matCellDef="let element">{{element.Postcode}} </td><ng-container matColumnDef="性别"><th mat-header-cell *matHeaderCellDef>性别</th><td mat-cell *matCellDef="let element">{{element.Gender}} </td></ng-容器><ng-container matColumnDef="Salary"><th mat-header-cell *matHeaderCellDef>薪水</th><td mat-cell *matCellDef="let element">{{element.Salary}} </td></ng-容器><ng-container matColumnDef="JobTitle"><th mat-header-cell *matHeaderCellDef>JobTitle </th><td mat-cell *matCellDef="let element">{{element.JobTitle}} </td></ng-容器><tr mat-header-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr></mat-card>
当我运行它时,我只看到一个空白屏幕.没有控制台错误或类似的错误.我需要对 template.html 和/或 component.ts
进行哪些更改才能显示数据?
您需要进行这些更改.
在 component.ts 中:
import { HttpClient } from "@angular/common/http";从@angular/core"导入 { Component, OnInit };从@angular/forms"导入 { FormBuilder, FormGroup, Validators };从@angular/router"导入 { ActivatedRoute, Router };从@angular/material"导入 { MatTableDataSource };从../object.model"导入{对象};@成分({styleUrls: ["./styles.scss"],templateUrl: "./template.html"})导出类 MyRouteData 实现 OnInit {员工信息表:对象[] = [];employeeInfoTableDataSource = new MatTableDataSource(this.employeeInfoTable);显示列:字符串[] = [姓名",出生日期",地址",邮政编码",性别",薪水"职称"];构造函数(私有 http:HttpClient){}ngOnInit() {this.http.get("http://localhost:5000/MyRoute/GetEmployeeInfo").订阅(响应=> {this.employeeInfoTable = 响应;this.employeeInfoTableDataSource.data = this.employeeInfoTable;});}}
在 object.model.ts 中
导出接口对象{身份证号码;名称:字符串;出生日期:日期;地址:字符串;邮政编码:字符串;性别:字符串;薪水:人数;职位名称:字符串;}
在您的 .html 中
<table mat-table [dataSource]="employeeInfoTableDataSource" class="mat-elevation-z8"><ng-container matColumnDef="名称"><th mat-header-cell *matHeaderCellDef>Name </th><td mat-cell *matCellDef="let element">{{element.Name}} </td></ng-容器><ng-container matColumnDef="DateOfBirth"><th mat-header-cell *matHeaderCellDef>出生日期</th><td mat-cell *matCellDef="let element">{{element.DateOfBirth}} </td></ng-容器><ng-container matColumnDef="地址"><th mat-header-cell *matHeaderCellDef>地址</th><td mat-cell *matCellDef="let element">{{element.Address}} </td></ng-容器><ng-container matColumnDef="邮政编码"><th mat-header-cell *matHeaderCellDef>邮政编码</th><td mat-cell *matCellDef="let element">{{element.Postcode}} </td><ng-container matColumnDef="性别"><th mat-header-cell *matHeaderCellDef>性别</th><td mat-cell *matCellDef="let element">{{element.Gender}} </td></ng-容器><ng-container matColumnDef="Salary"><th mat-header-cell *matHeaderCellDef>薪水</th><td mat-cell *matCellDef="let element">{{element.Salary}} </td></ng-容器><ng-container matColumnDef="JobTitle"><th mat-header-cell *matHeaderCellDef>JobTitle </th><td mat-cell *matCellDef="let element">{{element.JobTitle}} </td></ng-容器><tr mat-header-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr></mat-card>
Currently I have the following code to populate a table.
In 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;
});
}
}
My template.html file looks like this:
<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>
which works but honestly, it looks terrible. What I would like to do is to use a mat-table: https://material.angular.io/components/table/examples
I've updated the template.html to:
<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>
and when I run this I just see a blank screen. There are no console errors or anything like that. What changes do I need to make to template.html and/or component.ts
to get the data to show?
You need to make these changes.
In 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;
});
}
}
In object.model.ts
export interface Object{
id: number;
Name: string;
DateOfBirth: Date;
Address: string;
Postcode: string;
Gender: string;
Salary : number;
JobTitle : string;
}
In your .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>
这篇关于在 angular 7 中,如何使用来自对象的数据填充 mat-table的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!