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

Я новичок в материалах angular, и я никогда не использовал mat-table, mat-header и т. Д., Поэтому у меня есть обычная таблица HTML, и я хочу создать ее с таблицей данных angular материала. Я упомянул 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"}];

Спасибо :)


angular datatable angular-material angular2-routing angular-datatables
person Ronak Dumaniya    schedule 09.05.2019    source источник
comment
Образцы данных будут более полезными!   -  person Prashant Pimpale    schedule 09.05.2019
comment
@PrashantPimpale, что еще мне добавить?   -  person Ronak Dumaniya    schedule 09.05.2019
comment
JSON: keys и label?   -  person Prashant Pimpale    schedule 09.05.2019
comment
Я ожидал как код! с изображениями сложно работать!   -  person Prashant Pimpale    schedule 09.05.2019
comment
@PrashantPimpale просто проверьте вопрос, который я отредактировал, и укажите image.key означает значение из массива   -  person Ronak Dumaniya    schedule 09.05.2019
comment
@PrashantPimpale просто проверьте еще раз, может быть, это может быть полезно   -  person Ronak Dumaniya    schedule 09.05.2019
comment
См. Это: нужен JSON в качестве кода, чтобы я мог попробовать ваш код: stackoverflow.com/q/54049115/7124761   -  person Prashant Pimpale    schedule 09.05.2019
comment
@PrashantPimpale, просто посмотрите еще раз, это полезно, пожалуйста, помогите мне, если возможно, тогда   -  person Ronak Dumaniya    schedule 09.05.2019
comment
@ Ронал Отлично! Другой массив?   -  person Prashant Pimpale    schedule 09.05.2019
comment
@PrashantPimpale просто дублирует массив, о котором я упомянул, просто значение будет изменено   -  person Ronak Dumaniya    schedule 09.05.2019
comment
Проверьте это: stackblitz.com/edit/angular-tejpch   -  person Prashant Pimpale    schedule 09.05.2019
comment
@PrashantPimpale Как назначить мой множественный массив ELEMENT_DATA, потому что это. Ключи имеют динамический массив   -  person Ronak Dumaniya    schedule 09.05.2019
comment
Надо подумать, вы можете использовать динамические столбцы для данных!   -  person Prashant Pimpale    schedule 09.05.2019
comment
Проверьте это: stackoverflow.com/a/54059924/7124761   -  person Prashant Pimpale    schedule 09.05.2019
comment
Просто просмотрите mat-table документацию. Это довольно просто   -  person adhirajsinghchauhan    schedule 11.05.2019

Ответы (1)


arrow_upward
-1
arrow_downward

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

<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>
person Mohammadreza Imani    schedule 09.05.2019
comment
ngx-datatable - это сторонний компонент. OP хотел предложения мат-таблицы - person adhirajsinghchauhan; 11.05.2019