Блог

Клиент отправляет sql-запрос, который будет выполнен на сервере. Сервер обрабатывает sql, извлекает данные и возвращает их в виде набора данных обратно на сторону клиента. Они представлены в такой форме:

 <?xml version="1.0" encoding="UTF-8"?>
<FlexiDataSet>
   rn
   <Table>
      rn
      <OperatorId>112051</OperatorId>
      rn
      <UserName>112051</UserName>
      rn
      <Name>Vasya  Whitebear</Name>
      rn
      <IsLeftHanded>false</IsLeftHanded>
      rn
      <PinCode>CFCD208495D565EF66E7DFF9F98764DA</PinCode>
      rn
      <OperatorType>SystemUser</OperatorType>
      rn
   </Table>
   rn
   <Table>
      rn
      <OperatorId>114178</OperatorId>
      rn
      <UserName>114178</UserName>
      rn
      <Name>QaLab03Dev owner  QaLab03Dev</Name>
      rn
      <IsLeftHanded>false</IsLeftHanded>
      rn
      <PinCode>CFCD208495D565EF66E7DFF9F98764DA</PinCode>
      rn
      <OperatorType>SystemUser</OperatorType>
      rn
   </Table>
</FlexiDataSet>
  

Важно отметить, что данные не всегда будут поступать в таком виде
потому что клиент может выполнить любой SQL-запрос. Как отобразить этот xml
как таблица в angular?

Я нашел решение:

Прежде всего, вам нужна библиотека Angular для преобразования XML-данных в JSON.

Компонент

 public XML_DataSet = 'XML from question';
public tableHeaders = [];
public tableValues = [];

     ngOnInit() {
        this.PrepareData();
      }

      PrepareData() {
        let x = this.XML_DataSet;
        const parser = new DOMParser();
        const xml = parser.parseFromString(x, 'text/xml');
        let json = this.xml2json.xmlToJson(xml); // XML is converted in JSON
        this.tableValues = json['FlexiDataSet']['Table'];
    
        for (let data of this.tableValues) {
          // Extract table headers
          this.tableHeaders = Object.keys(data);
          //Remove #text - unnecessary column
          this.tableHeaders.shift();
          break;
        }
      }
  

HTML

   <div>
    <table>
      <thead>
        <tr>
          <th *ngFor="let header of tableHeaders">
            {{header}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of tableValues">
          <td *ngFor="let header of tableHeaders">
            {{data[header]}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  

CSS

Для стилизации вашей таблицы вы можете воспользоваться руководством по следующей ссылке.

Если вы хотите отображать результаты в угловой сетке, измените HTML

   <div>
    <table mat-table #table [dataSource]="tableValues">
      <ng-container *ngFor="let column of tableHeaders" [matColumnDef]="column">
        <mat-header-cell *matHeaderCellDef>{{ column }}</mat-header-cell>
        <mat-cell *matCellDef="let row">{{ row[column] }}</mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="tableHeaders"></mat-header-row>
      <mat-row *matRowDef="let row; columns: tableHeaders;"></mat-row>
    </table>
  </div>
  

Если вы хотите отображать результаты в сетке Syncfusion EJ2, измените логику

HTML

 <div>
  <ejs-grid #grid [dataSource]='tableValues'
            height="100%"
            width='100%'
            [toolbar]='toolbar'
            [searchSettings]='searchOptions'
            [allowFiltering]=true
            [filterSettings]='filterSettings'
            [allowSorting]=true
            [allowPaging]=true
            [pageSettings]='pageSettings'
            [allowGrouping]=true>
  </ejs-grid>
</div>
  

Компонент

   import { SearchSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids';
  @ViewChild('grid')
  public grid: GridComponent;

  public grid: GridComponent;
  public toolbar: Object[] = ['Search'];
  public searchOptions: SearchSettingsModel = { fields: this.tableHeaders, operator: 'contains', ignoreCase: true };
  public filterSettings: Object = { type: "Menu" };
  public pageSettings: Object = { enableQueryString: true, pageSize: 20 };

SyncFusionGrid() {
    let columns = [];
    for (let data of this.tableHeaders) {
      let column = { field: data, headerText: data };
      columns.push(column);
    }
    this.grid.columns = columns;

    // Set column width
    for (let column of this.grid.columns) {
      column['width'] = '200';
    }
  }
  

Вызовите метод SyncFusionGrid(), когда у нас будут данные, которые нам нужно отобразить. В моем примере это завершение метода PrepareData()

Вы выполнили почти все шаги для выполнения вашего требования. На последнем шаге вам необходимо создать EJ2 Angular, используя следующую ссылку «Начало работы», и привязать преобразованный источник данных (XML-данные в JSON) к Grid. Пожалуйста, обратитесь к приведенной ниже документации и ссылкам на примеры.

Начало работы:https://ej2.syncfusion.com/angular/documentation/grid/getting-started /

Привязка к локальному источнику данных: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/?no-cache=1#local-data

Пример браузера:https://ej2.syncfusion.com/angular/demos/#/material/grid/default