iterating interface array using *ngFor in typescript

user_7469515 0
Viewed 781

So I have Implemented an interface for retrieve data from a service class. 

export interface FilteredSubjects {
  key: string,
  list: Subject[]
}

So currently I want to iterate FilteredSubject interface array. So I check using console.log

console log output

But I am unable to iterate this using *ngFor. This is what I have tried so far. here selectedStreamList values shows in interface 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 Ts method. I'm getting filteredlist from a parent component.

 @Input("slist") filteredlist: FilteredSubjects[];



 constructor() {
  }

  ngOnInit() {}


getStreamFilter(index:number) : Subject[]{
    return this.filteredlist[index].list;
}

but this no working. how to solve this problem?

this is the error enter image description here

ngfor angular typescript interface
1 Answers

After some research I found a way to solve this. it was a problem in calling method.

 getStreamFilterX(index:number) : Subject[]{

this.selectedStreamID = index;
let subList: Subject[] = [];
this.filteredlist.forEach((item: FilteredSubjects) => {
  if(item.key == index.toString()) {
    subList = item.list;
  }
});
return subList;
user_119899230
Related