Angular 在typescript中使用*ngFor迭代接口数组

因此，我实现了一个从服务类检索数据的接口

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

所以现在我想迭代

FilteredSubject

接口数组。所以我使用

console.log

但我无法使用*ngFor重复此操作。 这就是我迄今为止所尝试的。此处

selectedStreamList

值显示在界面

Key

属性中

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>
  .....

但这是行不通的。如何解决这个问题

这就是错误所在

---

经过一些研究，我找到了解决这个问题的方法。调用方法时出现问题

 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;

---

您在哪里初始化

filteredlist

，它未定义，因此

filteredlist[index]

将未定义，从而导致ngFor终止。我从父组件获取它。我更新了这个问题：）@PasinduSenarath你能用Stackblitz中的一个简单例子重新创建这个问题吗？你是如何从父级传递输入属性的：如果你像这样传递输入[slist]=“x”，其中x是值列表。应该行得通

 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;