如何显示从正常的HTMLtable到Angular MaterialTable的数据？我想把我的 HTML 精确到 mat table html.!

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"
    }
]

**

我想将此 table 数据从正常 html 显示为 angular material 因为我从本地 json 获取数据并显示数据请帮忙！

因此可以将 html 变为 angular 垫 table 请告诉我如何制作垫子 table。我最困惑的是如何在 angular 垫 table 中制作 header 以及如何显示行！

Answer 1

如 Material Spec 中所述。您可以执行以下操作：

EDIT 动态数据

component.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>

Answer 2

您也可以在不创建接口的情况下执行此操作，这是一个有效的 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>

如何显示从正常的HTMLtable到Angular MaterialTable的数据？我想把我的 HTML 精确到 mat table html.!

How to display data from normal HTML table to Angular Material Table? i want exact my HTML into mat table html.!

typescript

material-design

angular-material

angular5