Question

我正在尝试创建一个带有syncfusion的网格，但是我必须进行两次API调用，并且必须添加来自这两个API响应的响应，然后使用带有angular7的syncfusion填充数据。无法这样做。

请帮助我使用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

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

1 个答案: