在Angular 5

Question

我有一个Json对象数组，

[
        { text: 'Product Name 1',  datafield: 'ProductName', width: '20%' },
        { text: 'Quantity per Unit',  datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' , width: '20%'},
        { text: 'Unit Price',  datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: '20%' },
        { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: this.cellsrenderer, width: '20%' },
        { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', align: 'center' , width: '20%'}
]

我已将此json数组存储在Angular-2中assets文件夹中名为world_bank.json的File中。这是Jqwidgets的基本结构。

我从文件中获取了这个数组，我可以在控制台中看到它。但我想在json对象中将其转换为打字稿可以理解的。

export class DashboardComponent implements AfterViewInit {

     jqwidgets_tbl: any;

    // columngroups: any[] =
     constructor(private router:Router,private http:Http) {
                    this.http.get('http://localhost:4200/assets/world_bank.json')
                     .subscribe(jqwidgets_tbl => {
                              // alert(jqwidgets_tbl);
                              console.log(jqwidgets_tbl );
                              this.jqwidgets_tbl = jqwidgets_tbl;
                      });
      }

我想将其转换为对象的json数组。 所以，我可以在组件文件中使用它。

我的组件文件的Jqwidgets代码。

@ViewChild('myGrid') myGrid: jqxGridComponent;

Rowclick(event: any): void {
    var args = event.args;
    var selectedRowIndex = args.rowindex;
    // alert(selectedRowIndex);
    $('#right_panel').css('display','block');
    $('body').removeClass('aside-menu-hidden');
}
source: any =
{
    datatype: 'xml',
    datafields: [
        { name: 'ProductName', type: 'string'  },
        { name: 'QuantityPerUnit', type: 'int' },
        { name: 'UnitPrice', type: 'float' },
        { name: 'UnitsInStock', type: 'float' },
        { name: 'Discontinued', type: 'bool' }
    ],
    root: 'Products',
    record: 'Product',
    id: 'ProductID',
    url: '../../assets/product.xml'
};

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

cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
    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: 'Product Name 1',  datafield: 'ProductName', width: '20%' },
        { text: 'Quantity per Unit',  datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' , width: '20%'},
        { text: 'Unit Price',  datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: '20%' },
        { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: this.cellsrenderer, width: '20%' },
        { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', align: 'center' , width: '20%'}
];
 // I want to replace columns data with that file's data.
columngroups: any[] =
[
    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
];

我想用该文件的获取数据替换列变量数据。我已将列的数据存储在文件中，该文件位于资产文件夹中。

我尝试过替换，但它无法正常工作，我在console.log中成功找到this.jqwidgets_tbl（this.jqwidgets_tbl），

columns: any[] = this.jqwidgets_tbl;