具有angular7的多响应的syncfusion动态网格数据

Question

我正在尝试使用syncfusion创建一个网格，但我必须进行两次API调用，我必须从两个API响应中添加响应，然后使用带有angular7的synchronfusion填充数据。不能这样做。

请帮助我使用jsfiddle或任何工作样本。

我用过 ：

npm install @syncfusion/ej2-angular-grids --save 

npm install @syncfusion/ej2 --save 

Answer 1

您可以通过更新Grid DataSource将API响应绑定到网格。请参阅下面的示例，在Angular7中使用两个API调用绑定网格数据，并在创建的事件中使用Ajax来满足您的要求。

[HTML]

<ejs-grid [dataSource]='data' (created)='created($event)' height='350'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
        <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column>
        <e-column field='ShipCity' headerText='Ship Country' width='150'></e-column>
    </e-columns>
</ejs-grid>

[TS]

created(args){
let ajax = new Ajax();
ajax.type = 'Get';
ajax.url = 'https://ej2services.syncfusion.com/production/web-services/api/Orders';
ajax.send();
ajax.onSuccess = (args) => {
  this.data = JSON.parse(args);
};
let ajax2 = new Ajax();
ajax2.type = 'Get';
ajax2.url = 'https://ej2services.syncfusion.com/production/web-services/api/Orders';
ajax2.send();
ajax2.onSuccess = (args) => {
  this.data = [...this.data , ...JSON.parse(args)];
}

有关更多信息，请参阅以下示例和文档，

Sample

文档：Created，Ajax