I am working on a component that takes in data through the @Input() decorator regarding a group. My objective is to generate a new array of objects during the initialization of the component based on the data from the group array. Below is the TypeScript component section:
import { Component, OnInit, Input } from '@angular/core';
import {Group} from "@models/group.model";
@Component({
selector: 'app-group-admins',
templateUrl: './group-admins.component.html',
styleUrls: ['./group-admins.component.css']
})
export class GroupAdminsComponent implements OnInit {
@Input() group: any = new Group();
users: Array<object> = [];
constructor() { }
ngOnInit() {
this.users = this.group.users.map((a: { user: number; permissions: number; }) => ({id: a.user, permissions: a.permissions}));
}
getUsers() {
this.users = this.group.users.map((a: { user: number; permissions: number; }) => ({id: a.user, permissions: a.permissions}));
}
}
Below are my Group and GroupUser models (if needed):
import {GroupUser} from "@models/group-user.model";
export class Group {
group_name: string;
type: string;
avatar?: string;
header?: string;
address?: string;
date?: string;
city?: string;
about?: string;
verify_status?: string;
site?: string;
phone?: string;
email?: string;
web_site?: string;
industry?: true;
directions_list?: string;
users: Array<GroupUser>
}
export class GroupUser {
id?: number;
user: number;
permissions: string;
confirmed?: boolean;
}
Here is the part of my parent TS component:
group = [];
ngOnInit() {
this.route.paramMap.subscribe(() => {
this.id = this.route.snapshot.paramMap.get("id");
this.groupService.getSpecGroup(this.id).subscribe(
((info) => {
this.group = info;
})
);
});
}
And here is the HTML section:
<app-group-admins [group]="group"></app-group-admins>
In summary, I am attempting to create a users array using ngOnInit, but I encounter an error
TypeError: Cannot read property 'users' of nullgetUsers() function. Any assistance would be greatly appreciated.