Angular: Cannot read property 'dataRows' of undefined - html

Question

Can anyone help me with this issue.
Seems to be caused by the fact that the datatable is being build before the data is returned.
The data does load but and the table works as required but its annoying me that it still shows in the console.
Any help would be great, code below.
userlist.component.ts
export class UserslistComponent implements OnInit {
public dataTable: DataTable;
public dataTableData: any;
constructor( private usersService: UsersService) {}
ngOnInit() {
this.usersService.getUsers().subscribe(data => { this.buildDtOptions(data); });
}
buildDtOptions(tableData: any): void {
this.dataTable = {
headerRow: [ 'Firstname', 'Lastname', 'Email', 'Permission', 'Account Status' ],
footerRow: [ 'Firstname', 'Lastname', 'Email', 'Permission', 'Account Status' ],
dataRows: tableData
};
}
ngAfterViewInit() {
$('#datatable').DataTable({
'pagingType': 'full_numbers',
'lengthMenu': [
[10, 25, 50, -1],
[10, 25, 50, 'All']
],
responsive: true,
language: {
search: '_INPUT_',
searchPlaceholder: 'Search records',
},
});
const table = $('#datatable').DataTable();
}
users.service.html
export class UsersService {
localUrl = './assets/data/users.json';
usersUrl = 'https://my.api.mockaroo.com/users.json?key=58f30fc0';
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get(this.localUrl)
.catch(this.errorHandler);
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error.message || 'Server Error');
}