如何将html表格转换为角度材料数据表

Question

我是角度材料的新手，我从未使用过 mat-table 和 mat-h​​eader 等，所以我有普通的 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>

它的工作表，但现在我只想把它设计得恰到好处，所以我想把它放在数据表中。

编辑

这是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"}];

谢谢你:)

Answer 1

使用这张表

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