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

Question

我的问题是当调用 ngOnIt 、 AfterViewInit 方法时，全局变量是 undefined。 我正在从资产文件夹中的 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 文件条件的数组（我的意思是来自订阅方法）。

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

所以，我可以从函数中获取column_data，并且 column_data 的值是 '2' 它可能是 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，初始化.columns 在构造函数中，然后在成功（模拟）AJAX 调用后更新它。

Answer 2

你可以试试这个方法

this.gotodef(this.column_data);