Http Async Promise doesn't draw the table until manually clicked

[tosehee75]

In below code, if I manually set the data, it displays the table correctly.

However, if I externalize the data with "Http" and promise, it doens't display the table until the user manually clicks someone on the table itself.

I am guessing the async is causing this issue, but I have no clue how to work around it..

this.data = [
  {
    'number': '000282882',
    'shipToName': 'Bill Gibson',
    'contractNumber': 'PO-12345634',
    'shipVia': 'UPS Ground',
    'shippingStatus': 'Shipped',
    'actualShipDate': '1/25/2017 12:00 PM',
    'updatedDate': '1/25/2017 12:00 PM',
    'currentStatus': 'Draft'
  },
  {
    'number': '000282882',
    'shipToName': 'Bill Gibson',
    'contractNumber': 'PO-12345634',
    'shipVia': 'UPS Ground',
    'shippingStatus': 'Shipped',
    'actualShipDate': '1/25/2017 12:00 PM',
    'updatedDate': '1/25/2017 12:00 PM',
    'currentStatus': 'Pending'
  }
];
this.length = this.data.length;
this.onChangeTable(this.config);

// this.orderService.getOrderListForTab(tab, this.columns, this.page, this.itemsPerPage).subscribe(res => {
//     this.data = res;
//     this.length = this.data.length;
//     this.onChangeTable(this.config);
//   });

[tosehee75]

Never mind on this.

Changing the detection strategy from OnPush to default fixed the problem for me.

changeDetection: ChangeDetectionStrategy.Default,

[stalinrangel]

thanks tosehee75 i solved