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>

但最终出现错误：

错误错误：找不到[object Object]“对象”类型的不同支持对象。NgFor 仅支持绑定到 Iterables，例如 Arrays。

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

标签： angulartypescriptmultidimensional-array

Answer 1

刚刚改成test[i]是test一个数组，你可以迭代它，但是test[i]是和对象，不能迭代。

ts代码：

 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>

演示