Angular 使用带有嵌套ngfor的模板

使用Angular4 ReactiveForm（我正在使用的版本）创建一个表单。 哪里有表格，有代码、年份和类别列表

主要形式：

• 代码
• 年
• 类别[]
  • 代码
  • 描述
  • 命令
  • 产品[]
    • 代码
    • 描述
    • 价格

但是我尝试用以下方式显示表单，其中类别列表和每个类别中的产品都是行，并且都显示在同一个表中（示例）：

搜索时，我被告知使用ngfor模板，但我无法使用它们，当我尝试使用它们时，模板标记内的内容不会显示

如果我使用divs，我可以在每个类别下显示产品。但是它在桌子里不太好用

我的模板：

<div>
<form [formGroup]="form">
    <input type="text" formControlName="code" />
    <input type="text" formControlName="year" />
    <table>
        <div formArrayName="categories">
        <template *ngFor="let category of form.controls['categories'].controls; let i=index">
            <tr>
                <td><input type="text" formControlName="code" /></td>
                <td><input type="text" formControlName="desc" /></td>
                <td><input type="text" formControlName="order" /></td>
            </tr>
            <div="products">
            <template *ngFor="let product of category.controls['products'].controls; let j=index">
                <tr>
                    <td><input type="text" formControlName="code" /></td>
                    <td><input type="text" formControlName="desc" /></td>
                    <td><input type="text" formControlName="price" /></td>
                </tr>
            </template>
            </div>
        </template>
        </div>
    </table>
</form>
</div>

---

首先，您应该使用

ng模板

，因为

模板

在v4中已被弃用

如果您查看浏览器的控制台，可能会看到如下错误：

错误：找不到路径为“ARRAY\u NAME-> 表格(控制)(名称)

要修复它，您必须用

formGroupName

包装

类别

：

<tr [formGroupName]='i'>
  ...
</tr>

---

如果您的

组件

文件中的所有内容都正确，它应该可以工作。

嘿，我的答案对您有用吗？

<div>
<form [formGroup]="form">
    <input type="text" formControlName="code" />
    <input type="text" formControlName="year" />
    <table>
        <div formArrayName="categories">
        <template *ngFor="let category of form.controls['categories'].controls; let i=index">
            <tr>
                <td><input type="text" formControlName="code" /></td>
                <td><input type="text" formControlName="desc" /></td>
                <td><input type="text" formControlName="order" /></td>
            </tr>
            <div="products">
            <template *ngFor="let product of category.controls['products'].controls; let j=index">
                <tr>
                    <td><input type="text" formControlName="code" /></td>
                    <td><input type="text" formControlName="desc" /></td>
                    <td><input type="text" formControlName="price" /></td>
                </tr>
            </template>
            </div>
        </template>
        </div>
    </table>
</form>
</div>

<tr [formGroupName]='i'>
  ...
</tr>

<div="products" formArrayName="products">
  ...
      <tr [formGroupName]='j'>
        ...
      </tr>
  ...
</div>