Создание таблицы материалов с объектом класса Dynami c - PullRequest
Новая
       9

Создание таблицы материалов с объектом класса Dynami c

0 голосов
/ 16 января 2020

Мне нужно создать таблицу в html (с меньшим количеством внутреннего кода) из данных, поступающих из API. Данные будут поступать следующим образом (смоделированы для этого вопроса) 

{ strTableName: "TestTable",  strComment:"Approved", 
        lstTableHeaders:[
          {strFieldName : "Sl No.", strType:"Numeric", lstComments:[]},
          {strFieldName : "Description", strType:"string", lstComments:[]},
          {strFieldName : "Units", strType:"Numeric", lstComments:[]},
          {strFieldName : "Total", strType:"Amount", lstComments:[]},
        ], TableData:
        {
          lstRowData:[
            {iID: 1, lstCellData:[
              {strFieldName:"Sl No.", strValue:"1", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Description", strValue:"Item 1", strComment:"", strBackgroundColor:"red"},
              {strFieldName:"Units", strValue:"1", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Total", strValue:"500", strComment:"", strBackgroundColor:"yellow"},
            ]},
            {iID: 2, lstCellData:[
              {strFieldName:"Sl No.", strValue:"2", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Description", strValue:"Item 2", strComment:"", strBackgroundColor:"red"},
              {strFieldName:"Units", strValue:"3", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Total", strValue:"1500", strComment:"", strBackgroundColor:"yellow"},
            ]},
          ]
        }
      }

Цвет фона будет использоваться как цвет ячейки bg, а комментарий будет использоваться для всплывающих данных, когда мышь завис на камеру. Это относится к стилю, но мне нужно создать таблицу из этих данных. возможно ли это?
(Попытка поиска большого количества вопросов из github, stackoverflow и даже просмотра документов из angular. Задание этого вопроса в качестве окончательного варианта.)

Редактировать: приведите приведенный ниже код в html чтобы появились заголовки. все еще изо всех сил пытается получить данные в таблице. 

              <mat-table #table>
                <ng-container *ngFor="let column of item.lstTableHeaders" [matColumnDef]="column.strFieldName">
                  <mat-header-cell *matHeaderCellDef>{{ column.strFieldName }}</mat-header-cell>
                  <mat-cell *matCellDef="let column">{{ column.strFieldName }}</mat-cell>
                </ng-container>
                <mat-header-row *matHeaderRowDef="item.displayedTableHeaders()"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedTableHeaders();"></mat-row>
              </mat-table>

и в файле ts: я добавил еще одну функцию для модели таблицы: 

public displayedTableHeaders() : string[]{
        return this.lstTableHeaders.map(x=> x.strFieldName);
    }

любая помощь будет оценена.

1 Ответ

0 голосов
/ 27 января 2020

Любому, кто интересуется, я решил эту проблему, создав функцию, которая дает текущий номер строки и имя поля в качестве пары ключ-значение, и использовал ее в качестве источника данных. Тогда данные ячейки будут другой функцией, которая получает текущий номер строки и имя поля и получает значение из этой комбинации. Единственным недостатком было то, что мне пришлось написать событие, которое обнаруживает изменения и использовать это значение для установки исходной модели, но было готово сделать это для достижения полностью динамической таблицы c. 

public TableSource() {
        var item : any;

        var jsonToBeUsed = [];
        var finalJson = [];

        this.objTableData.lstRowData.forEach(x => {
            x.lstCellData.forEach(y => {
                item = {};
                item.key = x.iID;
                item.value = y.strFieldName;
                jsonToBeUsed.push(item);
            },
            )
            finalJson.push(jsonToBeUsed),
            jsonToBeUsed = [];

        }
        )
        return finalJson;

    }

используйте эту функцию в качестве источника данных 

<mat-table #table [dataSource]="item.TableSource()">
...
 <mat-cell *matCellDef="let row">
<div contenteditable="true" (keyup)="tableValueChanged(item.strTableName, column.strFieldName, row, $event.target.textContent)">{{gettablevalue(item.strTableName,row[0],column.strFieldName)}}</div>
 </mat-cell>
...
</mat-table>

Работает сейчас !!

...