Как преобразовать HTML-таблицу в таблицу данных углового материала - PullRequest
Новая
       41

Как преобразовать HTML-таблицу в таблицу данных углового материала

0 голосов
/ 09 мая 2019

Я новичок в угловых материалах и никогда не использовал mat-table, mat-header и т. Д., Поэтому у меня есть обычная таблица HTML, и я хочу создать ее с таблицей данных угловых материалов. Я упомянул код HTML ниже. 

<table style="width:100%" border="1">
    <tr>
      <th *ngFor="let head of label">{{head}}</th>
    </tr>
    <tr *ngFor="let key of keys">
      <td *ngFor="let k of key">{{k.value}}</td>
    </tr>
  </table>

Его рабочая таблица, но теперь я просто хочу создать ее правильно, поэтому я хочу, чтобы она была в таблице данных.

Редактировать enter image description here

Это файл component.ts 

ngOnInit() {
    var formId = this.route.snapshot.paramMap.get('id');
    this.headers = this.dataService.GetFormById(+formId).subscribe(res => {
      this.data = res;
      this.values = JSON.parse(this.data['TemplateJson']);
      this.values.forEach(da => {
        console.log(da['label']);
        let head = da['label'];
        this.label.push(head);
      });
    });

    this.servers = this.recordService.GetFormById(+formId).subscribe(response => {
      this.data = response;
      this.data.forEach(key => {
        this.values = JSON.parse(key['TemplateJson']);
        this.keys.push(this.values);
      });
    });
  }

Здесь я упоминаю пример массива, и я получаю 2 массива, как указано ниже, о которых я упомянул.

 [{ type: "header", subtype: "h1", label: "School Management" }, { type: "text", label: "FirstName1234", className: "form-control", name: "text-1554701360234", value: "ronak" }, { type: "text", label: "LastName", className: "form-control", name: "text-1554701374890", value: "dumaniya"}];

Спасибо:)

1 Ответ

0 голосов
/ 09 мая 2019

используйте эту таблицу 

<ngx-datatable
                    #memberTable
                    class="material striped"
                    [rows]="data"
                    [columnMode]="'flex'"
                    [headerHeight]="60"
                    [messages]="{emptyMessage: 'No Data', totalMessage: 'Total'}"
                    style="width: 100%"
                    [footerHeight]="45"
                    [rowHeight]="50"
                    [loadingIndicator]="isLoading"
                    [externalPaging]="false">

                    <ngx-datatable-column [resizeable]="false" prop="firstName" name="First Name" [flexGrow]="2">
                    </ngx-datatable-column>

                    <ngx-datatable-column [resizeable]="false" prop="lastName" name="Last Name"[flexGrow]="1">
                    </ngx-datatable-column>

                    <ngx-datatable-column [resizeable]="false" [flexGrow]="3">
                        <ng-template let-value="value" let-row="row" ngx-datatable-cell-template
                                     let-rowIndex="rowIndex">
                            <button mat-raised-button 
                                    color="primary">
                                Edit
                            </button>
                            <button mat-raised-button 
                                    color="primary" >
                                Delete
                            </button>                                                        
                        </ng-template>
                    </ngx-datatable-column>
                </ngx-datatable>
...