After successfully implementing an interface to retrieve data from a service class, I encountered an issue when attempting to iterate through the FilteredSubject interface array. Despite using console.log, I was unable to achieve the desired outcome.
You can view the console log output here.
My attempt at iterating through this array using *ngFor in my HTML file did not yield the expected results. Below is the code snippet where I try to display values based on the Key attribute:
HTML
<mat-step [stepControl]="firstFormGroup" *ngFor="let stream of selectedStreamList; let indexOfelement = index;">
<div class="class=pl-5">
<table class="table table-borderless ">
<tbody>
<ng-container *ngFor="let subject of getStreamFilter(indexOfelement)">
<tr>
<th scope="row"> <mat-checkbox (change)="toggle(subject)"> {{subject.name}} </mat-checkbox></th>
<td><a (click)="openDeleteSubjectDialog(subject.id)">
<mat-icon class="aligned-with-icon" color="warn">delete</mat-icon>
</a></td>
</tr>
</ng-container>
.....
This TypeScript method is used to receive a filtered list from the parent component:
@Input("slist") filteredlist: FilteredSubjects[];
constructor() {
}
ngOnInit() {}
getStreamFilter(index:number) : Subject[]{
return this.filteredlist[index].list;
}
However, despite these efforts being made, I am still facing issues with making it work as intended. If you have any insights on how to solve this problem, please do share.
You can view the error message here.