Question

我有一个看起来像这样的对象：

foo = {
    "key1": [{...}, {...}, ...],
    "key2": [{...}, {...}, ...],
    ....
}

然后在我的Component html中我想做这样的事情：

<table>
    <!-- for each key in foo -->
    <tr>
        <td>{{ key }}</td>
    </tr>
    <!-- for each obj in foo[key] -->
    <tr>
        <td>{{ obj.name }}</td>
    </tr>
    <!-- endfor -->
    <!-- endfor -->
</table>

我的问题是根据Angular 2 website中提供的示例写出类似的内容

<table>
    <tr *ngFor="key in foo">
        <td>{{ key }}</td>
    </tr>
</table>

会在对象中创建许多带有键的行，但后来我不知道如何附加第二行。怎么能实现这个目标？

（如果有必要，我愿意添加更多信息）

Answer 1

我认为这是你所期待的。（我没有测试下面的代码。但你可以看到如何使用第二个for循环）

<table>
    <thead>
        <th *ngFor="#key of foo">
            {{ key }}
        </th>
    </thead>
    <tbody *ngFor="#key of foo">
       <tr *ngFor="#obj of foo[key]">
          <td>{{obj.name}}</td>
       </tr>
    </tbody>
</table>

更新了表格

  <table>
        <tbody *ngFor="#key of foo">
           <tr><td>{{key}} </td></tr>
           <tr *ngFor="#obj of foo[key]">
              <td>{{obj.name}}</td>
           </tr>
        </tbody>
    </table>

Answer 2

根据Misko Hevery，映射不应与ngFor一起使用，因为密钥没有排序，因此迭代是不可预测的。它可能在Angular1中，但在Angular2中不受支持。

在Angular2中，有计划提供mapToIterable管道。但是，从Angular2 beta 9开始，管道尚未推出。

幸运的是，自己实施mapToIterable管道是微不足道的：

@Pipe({ name: 'mapToIterable', pure: false })
export class MapToIterable implements PipeTransform {
    transform(value: any, args: any[] = null): any {

        return Object.keys(value).sort().map(
          key => { return { "key": key, "value": value[key] }});
    }
}

然后，您可以使用ngFor的模板语法来实现最终结果：

<table>
    <template ngFor #item [ngForOf]="foo | mapToIterable">
        <tr>
             <td>{{item.key}}</td>
        </tr>
        <tr *ngFor="#value of item.value">
             <td>{{value.name}}</td>
        </tr> 
    </template>
</table>

你如何在Angular 2中的表中进行嵌套

2 个答案: