Angular 2如何遍历多维数组？

Question

编辑#2

很遗憾，我尝试了这两个建议，但都没有成功。现在已经很晚了，我要去睡觉了，但我会在明天更新。

感谢Pradeep Jain的帮助。我也会尝试使用那个邪恶思维提出的管道。

我已经学会如何使用*ngFor命令，但它似乎只适用于简单的数组。以下是我正在尝试迭代的代码。

import {Lesson} from './lesson';

export var LESSONS: Lesson[] = [
{
    "idL": 1,
    "subject": 'Chapter One',
    "points": [
                'picture story', 'spelling test', 'words'
            ]
},
{
    "idL": 2,
    "subject": 'Words',
    "points": [
            'words', 'bacon', 'proliferation'
    ]
}
]

我正在尝试访问名为“points”的第二个数组。我认为它的格式没有问题，但我还没有找出如何访问它。

我看过AngularJS的foreach命令，但是Angular2的文档中并没有显示这样的命令可用。

有什么建议吗？

- Nathan

Answer 1

更新（2.0.0）

<table>
    <ng-container *ngFor="let lesson of LESSONS; let i = index">
      <ng-container *ngFor="let point of lesson.points; let j = index">
        <tr>{{point}}</tr>
      </ng-container>
    </ng-container>

<ng-container>是一个帮助元素，它不会被印在DOM上。它允许使用与内联*ngIf和*ngFor相同的语法。

原文

尝试这个：

<table>
<template ngFor #lesson [ngForOf]="LESSONS" #i="index">
  <template ngFor #point [ngForOf]="lesson.points" #j="index">
  <tr>{{point}}</tr>
  </template>
</template>

示例演示 实现效果Plunker。

- Pardeep Jain

---

哇，这真的帮了很多。谢谢伙计！你能指导我学习更多关于 [ngForOf] 的知识吗？ - Nathan

不客气，@Nathan。这是我迄今为止找到的唯一最好的文章：https://angular.io/docs/ts/latest/api/common/NgFor-directive.html - Pardeep Jain

根据我的看法，当默认的 [ngForOf] 已经提供了相同的功能时，为什么要使用额外的管道呢？@Nathan @evilmin - Pardeep Jain

我实际上很难将这两个建议中的任何一个合并进去。对于你的建议，我没有在主要的app.component文件中使用模板，而是在它们自己的组件中使用。据我所知，它应该可以工作，但是尽管所有路由都正确，但没有显示任何数据。 - Nathan

Answer 2

在 Angular 4 中，根据 Pardeep Jain 的答案进行修改后，以下方法可行。与 StepUp 的答案几乎相同，但使用了 ng-containers 标签：

 constructor() {

        this.data = {  
            displayArray:[
                ["Top Row 1st col", "Top Row 2nd col", "Top Row 3rd col"],
                ["Middle Row 1st col", "Middle Row 2nd col", "Middle Row 3rd col"],
                ["Bottom Row 1st col", "Bottom Row 2nd col", "Bottom Row 3rd col"]
            ]
        }

    };

在模板中：

<table >
    <ng-container *ngFor="let row of data.displayArray; let i = index">
        <tr>
            <ng-container *ngFor="let col of row; let j = index">
                <td>{{col}}</td>
            </ng-container>
        </tr> 
    </ng-container>
</table>

我不需要这些索引，但是我保留了它们以防其他人需要使用。

- davaus

Answer 3

尝试使用这个管道。

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ng-for="#value of object | values"> </div>

- evilmind

Answer 4

例如，您有以下多维数组：

export class AppComponent {
  rows: any[] = [];      

  constructor() {     
    this.rows = this.multiArray;        
  }

  multiArray = [
    //row 1
    [
      {cellValue:'row1 col1', cellId: 1},
      {cellValue:'row1 col2', cellId: 1},
    ],
    //row 2
    [
      {cellValue:'row2 col1', cellId: 2},
      {cellValue:'row2 col2', cellId: 1}      
    ],
    //row 3
    [
      {cellValue:'row3 col1', cellId: 3},
      {cellValue:'row3 col2', cellId: 1}      
    ]
  ]
}

你可以像这样循环遍历数组：

HTML：

<table>
  <tr *ngFor="let row of rows; let i = index">    
    <td *ngFor="let cell of row; let i = index">        
          <b>{{ cell.cellValue }} editable</b>        
    </td>
  </tr>  
</table>

- StepUp