Angular2嵌套ngFor

Posted 2023-03-13

【中文标题】Angular2嵌套ngFor

【英文标题】：Angular2 nested ngFor

【发布时间】：2016-05-16 11:05:41

【问题描述】：

我需要在 Angular2 中做同样的事情：

<?php
foreach ($somethings as $something) 
    foreach ($something->children as $child) 
        echo '<tr>...</tr>';
    

这可以通过 ngFor 实现，并且不在<table> 和<tr> 之间添加新元素吗？

【问题讨论】：

在你的 html 中使用 ng-repeat

ps 你可以嵌套 ng-repeat

ng-重复？ angular2中没有ng-repeat？您是否建议切换到 angular 1.x？

它不是由我编辑的，而是由另一个人编辑的。最初的问题版本中 Angular2 的表述与现在一样。

【参考方案1】：

我有一个样本可能与您想要的相似：

<table id="spreadsheet">
    <tr *ngFor="let row of visibleRows">
        <td class="row-number-column">row.rowIndex</td>
        <td *ngFor="let col of row.columns">
            <input  data-id="col.rowIndex-col.columnIndex" [value]="col.cellValue" (input)="col.cellValue = $event.target.value" (click)="model.selectColumn(col)" (keyup)="navigate($event)" />
        </td>
    </tr>
</table>

我用它来渲染一个看起来像电子表格的网格，如下所示：http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

【讨论】：

谢谢@TGH先生

链接失效

【参考方案2】：

如果您需要 2 个或更多 foreach 循环来绘制表格的行，您需要执行以下类似操作。

<template ngFor let-rule [ngForOf]="model.rules" let-ruleIndex="index">
    <template ngFor let-clause [ngForOf]="rule.clauses" let-clauseIndex="index">
        <tr>
            <td>clause.name</td>
        </tr>
    </template>
</template>    

【参考方案3】：

使用 ngFor 语法的“模板”形式，参见此处。它比更简单的*ngFor 版本更冗长，但这是您在不输出 html 的情况下实现循环的方式（直到您打算这样做）。一个例外：你仍然会在<table> 中获得 html cmets，但我希望没关系。这是一个有效的 plunkr：http://plnkr.co/edit/KLJFEQlwelPJfNZYVHrO?p=preview

@Component(
  selector: 'my-app',
  providers: [],
  directives: [],
  template: `
  <table>
    <template ngFor #something [ngForOf]="somethings" #i="index">
      <template ngFor #child [ngForOf]="something.children" #j="index">
      <tr>child</tr>
      </template>
    </template>
  </table>
  `
)
export class App 
  private somethings: string[][] = [
    children: ['foo1', 'bar1', 'baz1'],
    children: ['foo2', 'bar2', 'baz2'],
    children: ['foo3', 'bar3', 'baz3'],
  ]

【讨论】：

我不确定 Angular 是如何处理这个问题的，但是 IE 删除了 <table> 中的 <template> 标签。

编译前只是一个

【参考方案4】：

模板对我不起作用，但带有 ngForOf 的 ng-template 可以解决问题：

<ng-template ngFor let-parent [ngForOf]="parent" >
    <tr *ngFor="let child of parent.children">
        <td>
             child.field1 
        </td>
        <td> 
             child.field2 
        </td>
        <td> ... and so one ... </td>
    </tr>
</ng-template>

【参考方案5】：

我只是想为我的数据库中的任何表显示数据。我是这样做的：

我的 TypeScript Ajax 调用 table.component.ts 中的 API：

http.get<ITable>(url, params).subscribe(result => 
  this.tables = result;
, error => console.error(error));

我的 ITable

 interface ITable 
  tableName: string;
  tableColumns: Array<string>;
  tableDatas: Array<Array<any>>;

我的 table.component.html

<table class='table' *ngIf="tables">
  <thead>
    <tr>
      <th *ngFor="let tableColumn of tables.tableColumns"> tableColumn </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let tableData of tables.tableDatas">
      <td *ngFor="let data of tableData"> data </td>
    </tr>
  </tbody>
</table>