Question

我的问题是，当调用undefined，ngOnIt方法时，全局变量为AfterViewInit。我从资产文件夹中的json文件中获取数据。我已使用一个参数成功将数据传递给gotodef()函数。从那个gotodef()函数我返回变量。我需要的是我想返回gotodef（）函数中的数组，满足json文件中的条件（我的意思是订阅方法）。

以下是我的代码，

export class DashboardComponent implements AfterViewInit {

 column_data : any;

 constructor(private router:Router,private http:Http) {
            this.http.get('http://localhost:4200/assets/world_bank.json')
             .subscribe(data => {
                      data = (<any>data)._body;
                      let obj: MyObj = JSON.parse(data);
                      let outage_columns = obj.Outage.Columns;
                      let default_columns = obj.Default.Columns; // default_column's value is 2 in this case.
                      if(outage_columns == '')
                      {
                          let column_data = default_columns;
                          this.gotodef(column_data);
                      }

              });
    }
}

Gotodef功能： -

gotodef(column_data:any)
{

    if(column_data === '2')
    {
        console.log('in if statement');

        let columndata_1 = [
                { text: 'Product Name 1',  datafield: 'ProductName', width: '20%' , hidden:true },
                { 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%'}
            ];
        return columndata_1;
    }
}

现在，它的jqwidgets组件的行我想在this.column_data 中使用函数的返回值，但我可以返回它的值但是第一次它没有定义。

columns: any[] = this.gotodef(this.column_data);

所以，我很困惑如何完成这项任务。如何声明适当的变量来完成这项任务。

编辑： -

完整代码（使用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>`;
    }
};

gotodef(column_data:any)
{
    console.log(column_data);
    if(column_data === '1')
    {
        console.log('in if');
        let columndata_1 = [
                { 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%'}
            ];
        return columndata_1;
    }
    if(column_data === '2')
    {
        console.log('in second if');
        let columndata_1 = [
                { text: 'Product Name 1',  datafield: 'ProductName', width: '20%' , hidden:true },
                { 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%'}
            ];


    }
}

columns: any[] = this.gotodef(this.column_data);

columngroups: any[] =
[
    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
];

如果我把这样的条件运作起来，

if(column_data === '2' || typeof column_data === 'undefined')
    {
        console.log('in second if');
        let columndata_1 = [
                { text: 'Product Name 1',  datafield: 'ProductName', width: '20%' , hidden:true },
                { 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%'}
            ];


    }

所以，从这个检查中我已经弄清楚它是第一次未定义，然后是它的设定值。

EDIT-2 ： -

谢谢@ChrisG。我的问题很混乱所以我试图解释它。

我需要的是我想返回gotodef（）函数中的数组，并且满足json文件中的条件（我的意思是来自subscribe方法）。

Jqwidget的代码和gotodef()函数属于同一个类。所以，我可以从函数＆＃39的参数-1获取json文件的数据，在订阅者方法中gotodef(argument-1)，我可以将它传递给gotodef()。

所以，我可以从函数中获取column_data，而column_data的值是＆＃39; 2＆＃39;它可能是1,2或3等。

现在如果column_data有2个值，那么我必须更改数组。请参阅以下代码。

if(column_data === '2')
    {
        console.log('in second if');
        let Column_data_which_I_havetoreturn = [
                { text: 'Product Name 1',  datafield: 'ProductName', width: '20%' , hidden:true },
                { 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%'}
            ];

     return Column_data_which_I_havetoreturn;
    }

现在我必须将此返回的数据用于此语法

columns: any[] = this.gotodef(Column_data_which_I_havetoreturn);

所以，为此，我已经将变量Column_data_which_I_havetoreturn声明为类Column_data_which_I_havetoreturn : any。我收到了Column_data_which_I_havetoreturn，但这是第一次未定义。

Answer 1

您可以尝试此解决方案（我更改了一些名称）：

class DashboardComponent {

  columnDataIndex = 1  // initial value

  constructor() {
    this.columns = this.getColumnData(this.columnDataIndex)  // initialize this.columns
    // ajax call here
    // in subscribe, do:
    setTimeout(() => {
    console.log("ajax call succeeded");
      this.columnDataIndex = 2
      this.columns = this.getColumnData(this.columnDataIndex)
    }, 500);
  }
  
  getColumnData(index) {
    var column_data = [
      { 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%'}
    ];
    if (index == 2) column_data[0].hidden = "true";
    return column_data;
  }
  
  columns : any

}

const DC = new DashboardComponent();
console.log("columns", DC.columns[0]);
setTimeout(() => {
	console.log("columns", DC.columns[0]);
 }, 1000);

这些字段应该说明一切，但基本的想法是到目前为止AJAX调用只会改变最终应该在.columns中的列数据的类型，所以我添加了一个初始值{{1在构造函数中初始化1，然后在成功（模拟）的AJAX调用之后更新它。

Answer 2

你可以试试这种方式

this.gotodef(this.column_data);

Angular 5组件全局变量未定义？

2 个答案: