Javascript jqWidgets:不显示数据和网格

我使用jqWidgets在Angular中使用jqxGrid创建网格

我关注了这个演示 获取表格网格

但是，我在浏览器中看到的只是列名，列和行周围没有轮廓。而且，即使我链接到设置了所有数据的xml，也没有显示任何数据，但没有显示任何内容

import { Component } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';

@Component({
templateUrl: 'buttons.component.html',
selector: 'my-app',

})
export class ButtonsComponent {

constructor() { }

source: any =
 {
    datatype: "xml",        
    datafields: [
        { name: 'EmployeeNum', type: 'int' },
        { name: 'FullName', type: 'string' },
        { name: 'MarketCenter', type: 'string' },
        { name: 'FunctionTitle', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'TermDate', type: 'date' }
    ],
    root: "Employees",
    record: "Employ",
    id: 'EmployeeID',

    url: "demos/sampledata/products.xml"
 };

dataAdapter: any = new $.jqx.dataAdapter(this.source);

unitsInStockRenderer: any = (row, columnfield, value, defaulthtml, columnproperties, rowdata) =>
{
    if (value < 20)
    {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
    }
    else
    {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
    }
};

columns: any[] =
[
    {
        text: 'Employee #', columngroup: 'ProductDetails',
        datafield: 'EmployeeNum', width: 330
    },
    {
        text: 'Name', columngroup: 'ProductDetails',
        datafield: 'FullName', width: 330
    },
    {
        text: 'M/C', columngroup: 'ProductDetails', 
        datafield: 'MarketCenter', width: 330
    },
    {
        text: 'Function', columngroup: 'ProductDetails',
        datafield: 'FunctionTitle', width: 330
    },
    {
        text: 'Hire Date', columngroup: 'ProductDetails',
        datafeild: 'HireDate', width: 330
    },
    {
        text: 'Term Date', columngroup: 'ProductDetails',
        datafeild: 'TermDate', width: 330
    }
]; 

}

从'@angular/core'导入{Component}；
从“jqwidgets框架/jqwidgets ts/angular_jqxgrid”导入{jqxGridComponent}；
@组成部分({
templateUrl:'buttons.component.html'，
选择器：“我的应用程序”，
})
导出类按钮组件{
构造函数（）{}
资料来源：任何=
{
数据类型：“xml”，
数据字段：[
{name:'EmployeeNum'，键入：'int'}，
{name:'FullName'，键入：'string'}，
{name:'MarketCenter'，键入：'string'}，
{name:'FunctionTitle'，键入：'string'}，
{name:'HireDate'，键入：'date'}，
{name:'TermDate'，键入：'date'}
],
根：“员工”，
记录：“雇用”，
id:“EmployeeID”，
url:“demos/sampledata/products.xml”
};
dataAdapter:any=new$.jqx.dataAdapter（this.source）；
unitsInStockRenderer:any=（行、列字段、值、默认HTML、列属性、行数据）=>
{
如果（值<20）
{
返回“”+值+“”；
}
其他的
{
返回“”+值+“”；
}
};
列：任意[]=
[
{
文本：“Employee#”，列组：“ProductDetails”，
数据字段：“EmployeeNum”，宽度：330
},
{
文本：“名称”，列组：“产品详细信息”，
数据字段：“全名”，宽度：330
},
{
文本：“M/C”，列组：“ProductDetails”，
数据字段：“市场中心”，宽度：330
},
{
文本：“函数”，列组：“产品详细信息”，
数据字段：“FunctionTitle”，宽度：330
},
{
文本：“雇用日期”，列组：“产品详细信息”，
datafeild:“HireDate”，宽度：330
},
{
文本：“期限日期”，列组：“产品详细信息”，
数据字段：“TermDate”，宽度：330
}
]; 
}

下面是包含表数据的products.xml文件。这里有一行作为示例

<Employees>

<Employ EmployeeID="1">
<EmployeeNum>2793</EmployeeNum>
<FullName>Brian Miller</FullName>
<MarketCenter>458-Salt Lake City</MarketCenter>
<FunctionTitle>Controller</FunctionTitle>
<HireDate>10/12/2008</HireDate>
<TermDate>10/12/2008</TermDate>
</Employ>

</Employees>

2793
布莱恩·米勒
盐湖城458号
控制器
10/12/2008
10/12/2008

---

关于在网格中显示数据以及为什么网格和列周围没有轮廓的任何帮助，如上面我链接到的演示所示。感谢您的帮助。谢谢

我不得不将xml文件放在assets文件夹中，它工作正常

一件让我感到奇怪的事情是，当any已经设置为xml时，您正在将this.source设置为“any”。在分配期间，源可能为空，这也可能将您的any设置为空。为什么不直接将数据适配器设置为源？可能遗漏了什么。我相信这就是他们在上面的演示中所做的，我也链接到了。在控制台中，它确实给了我一个404错误。加载资源失败：服务器响应状态为404（未找到）。它指的是products.xml。因此，由于某种原因，它无法找到xml文件