angular - 如何循环遍历 Angular 中的嵌套数组

Question

我有一个这种形式的嵌套数组

tests: [
  [{name:"Bob",score:40,subject:"Math"}, {name:"John",score:55,subject:"Math"}],
  [{name:"Alice",score:70,subject:"English"},{name:"John",score:68,subject:"English"}]
],
// ...

我想循环遍历并打印，同时将相同的主题分组在一起，如下所示:

<div *ngFor = "let test of tests;let i = index">
  <ul *ngFor = "let student of test[i] ;let n = index">
     <li>{{student.name+' '+student.score}}</li>
  </ul>
</div>

但它以错误结束:

ERROR Error: Cannot find a differ supporting object [object Object] of type 'object'. NgFor only supports binding to Iterables such as Arrays.

从第二个循环开始。请问我在这里缺少什么？

Answer 1

只是将 test[i] 更改为 test 这是一个数组，你可以迭代它，但是 test[i] 是和对象并且不能迭代。

代码:

 tests = [
          [{name:"Bob",score:40,subject:"Math"},{name:"John",score:55,subject:"Math"}],
          [{name:"Alice",score:70,subject:"English"},{name:"John",score:68,subject:"English"}]
        ]

html:

<div *ngFor = "let test of tests;let i = index">
    <ul *ngFor = "let student of test ;let n = index">
        <li>{{student.name+' '+student.score}}</li>
    </ul>
</div>

DEMO