In my code, I have a class defined as follows :
export class Group {
id: string;
name: string = '';
type: 'local' | 'ldap' = 'local';
members: number[] = [];
This class is being used in my application.component.ts file like this :
protected localGroups: Group[];
protected ldapGroups: Group[];
protected ldapGroupsState: 'unloaded' | 'loading' | 'loaded' = 'unloaded';
public filteredList = this.localGroups.slice(); <-- resulting in an error saying "Property localGroups is used before its initialization"
The filteredList variable is utilized in the following way :
isFiltered(group: any) {
return this.filteredList.find(item => item.id === group.id);
}
I am facing difficulty in resolving this issue.
UPDATE :
I aim to implement a search filter within a mat-select using mat-select-filter.
Here is the HTML section related to this functionality :
<mat-select-filter [array]="localGroups" (filteredReturn)="filteredList=$event"
[displayMember]="'name'">
</mat-select-filter>
<mat-optgroup label="Local">
<mat-option id="application-local-groups-{{group.id}}" *ngFor="let group of localGroups"
[value]="group" [class.hide]="!isFiltered(group)">{{ group.name }}</mat-option>
</mat-optgroup>
If I initialize my variables according to Michael D's suggestion, my localGroups list disappears. I need to first conduct a search operation in order to display my local groups.