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转换为有角度的材料因为我从本地json获取数据并显示数据请帮忙！

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

Answer 1

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

编辑获取动态数据

component.ts

System.TypeLoadException : 'Could not load type 'System.ServiceModel.Description.MetadataConversionError' from assembly 'System.ServiceModel, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'.'
   at Microsoft.Xrm.Sdk.Client.ServiceConfiguration`1..ctor(Uri serviceUri, Boolean checkForSecondary)
   at Microsoft.Xrm.Sdk.Client.OrganizationServiceConfiguration..ctor(Uri serviceUri)
   at Microsoft.Xrm.Sdk.Client.ServiceConfigurationFactory.CreateManagement[TService](Uri serviceUri)

component.html

resData: any = [];
keys: any;

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>

如何显示从普通HTML表到Angular Material表的数据？我想将我的HTML精确地输入到Mat表html中！！

2 个答案: