I am currently working on a service that looks like this:
public getUsers() {
return this.httpClient.get(environment.BASE_URL + `api/all`);
}
In my component, I have implemented the ngx-bootstrap table to display the user data.
import { Component, OnInit } from "@angular/core";
import { UserService } from "./service.service";
import { IUser } from "./users.model";
@Component({
selector: "app-users",
templateUrl: "./users.component.html",
styleUrls: ["./users.component.css"]
})
export class UsersComponent implements OnInit {
allUsers: IUser[];
page = 1;
pageSize = 4;
collectionSize: any;
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getUsers().subscribe((data: any[]) => {
this.collectionSize = data.length;
this.allUsers = data;
});
}
get users(): IUser[] {
return this.allUsers.map((user, i) => ({ id: i + 1, ...user })).slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
}
}
Despite displaying all the data in the table on the DOM, I keep encountering the error message
TypeError: Cannot read property 'map' of undefinedI attempted to resolve this by using .pipe(), but then I started receiving the error:
TypeError: Cannot read property 'pipe' of undefinedIt's puzzling to me as the data is being shown correctly in the UI, yet this error persists in the console.