在打字稿中使用 *ngFor 迭代接口数组

Question

所以我实现了一个接口，用于从服务 class 检索数据。

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

所以目前我想迭代FilteredSubject接口数组。所以我使用 console.log

检查

console log output

但我无法使用 *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>
  .....

这个Ts方法。我正在从父组件获取过滤列表。

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



 constructor() {
  }

  ngOnInit() {}


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

但这不起作用。如何解决这个问题？

这是错误

Answer 1

经过一番研究，我找到了解决这个问题的方法。调用方法有问题

 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;

在打字稿中使用 *ngFor 迭代接口数组

iterating interface array using *ngFor in typescript

angular

typescript

interface

ngfor