如何显示从普通HTML表到角度材料表的数据?我想把我的HTML精确到mat-tablehtml

Question

这是我的TS文件

import { Component, OnInit } from '@angular/core';
import { RecommendationService } from '../recommendation-service.service';
import { CustomHttpService } from 'app/services/custom-http.service';

@Component({
selector: 'app-opportunity',
templateUrl: './opportunity.component.html',
styleUrls: ['./opportunity.component.scss'],
providers: [RecommendationService]
})
export class OpportunityComponent implements OnInit {

resData: any = [];
keys: any;
show: boolean;
constructor(private recommendationService: RecommendationService) {
this.recommendationService.viewData().subscribe(resViewData => {
this.resData = resViewData;
this.keys = Object.keys(resViewData[0])
});
}
toggle() {
this.show = !this.show
}
ngOnInit() {
}

<--! THIS IS MY HTML-->
<table *ngIf='show'>
<th *ngFor="let res of keys"> 
<!-- passing data into function-->
{{res}}
<div *ngFor="let schedule_data of resData">
{{schedule_data[res]}}
</div>
</th>
</table>

[![THIS IS MY RESULT][1]][1]

This is my JSON
[
{
"id": 1,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
}
]

**

我想将此表数据从普通html显示为有角度的材质as im从本地json获取数据并显示数据请帮忙！

因此可以将普通的html制作成角度垫子表请告诉我怎样做垫子桌好吗。我最困惑的是如何在角垫表中制作标题和如何显示行！

Answer 1

您也可以在不创建接口的情况下完成此操作，这里是一个工作的StackBlitz示例

在app.module.ts:中

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

在导入数组中添加此模块：

imports: [MatTableModule]

TS文件中的更改：

ELEMENT_DATA: any[] = [
{
Id: 1,
Name: "Test"
},
{
Id: 2,
Name: "Beispiel"
},
{
Id: 3,
Name: "Sample"
}
];
displayedColumns: string[] = ['Id', 'Name'];
dataSource = this.ELEMENT_DATA;

在HTML文件中：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="Id">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.Id}} </td>
</ng-container>
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.Name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Answer 2

如材料规范中所述。您可以执行以下操作：

编辑动态数据

组件.ts

resData: any = [];
keys: any;

component.html

<table *ngIf="resData.length > 0" mat-table class="mat-elevation-z8 table-content" [dataSource]="resData">
<ng-container *ngFor="let currentCol of keys; let colIndex = index" matColumnDef="{{ currentCol }}">
<th mat-header-cell *matHeaderCellDef>{{ currentCol }}</th>
<td mat-cell *matCellDef="let element; let rowIndex = index">{{
element[colIndex] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="keys"></tr>
<tr mat-row *matRowDef="let row; columns: keys;"></tr>
</table>