Как отобразить данные из обычной HTML-таблицы в Angular Material Table?Я хочу, чтобы мой HTML-код в таблицу HTML HTML! - PullRequest
Новая
       21

Как отобразить данные из обычной HTML-таблицы в Angular Material Table?Я хочу, чтобы мой HTML-код в таблицу HTML HTML!

0 голосов
/ 29 ноября 2018

ЭТО МОЙ ФАЙЛ 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 до углового, пожалуйста, скажите мне, как сделать таблицу матов.Я в основном запутался в том, как сделать заголовок в таблице угловых матов и как отображать строки!

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Вы также можете сделать это без создания интерфейса, вот рабочий StackBlitz пример

In 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>
0 голосов
/ 29 ноября 2018

Как объяснено в Спецификации материалов .Вы можете сделать следующее:

РЕДАКТИРОВАТЬ для динамических данных

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