Использование шаблона с вложенным ngfor

Создайте форму, используя Angular4 ReactiveForm (версия, которую я использую). Где у меня есть форма, в которой есть код, год и список категорий.

Основная форма:

• Код
• Год
• Categories[]
  • Code
  • Описание
  • Заказ
  • Products[]
    • Code
    • Описание
    • Цена

Но я пытаюсь отобразить форму следующим образом, где список категорий и продукты в каждой категории будут представлять собой все строки, и все они будут отображаться в одной таблице (пример):

<input code>
<input year>
<table>
<tr>Category 1</tr>
<tr>Product 1.1</tr>
<tr>Product 1.2</tr>
<tr>Product 1.3</tr>
<tr>Category 2</tr>
<tr>Product 2.1</tr>
<tr>Product 2.2</tr>
</table>
<button addNewCategory />
<button addNewProduct />

Мне удалось отобразить категории в виде строк, но я не могу отображать продукты в каждой категории в виде строки под строкой категории:

Моя машинописная форма:

ngOnInit() {
    this.form = this._fb.group({
        code: ['', Validators.required],
        year: ['', Validators.required],
        categories: this._fb.array([this.initCategory()])
    });
}

initCategory() {
    return this._fb.group({
        code: ['', Validators.required],
        desc: ['', Validators.required],
        order: ['', Validators.required],
        products: this._fb.array([this.initProduct()])
    });
}

initProduct() {
    return this._fb.group({
        code: ['', Validators.required],
        desc: ['', Validators.required],
        price: ['', Validators.required]
    });
}

В поиске мне сказали использовать шаблоны ngfor, но я не могу их использовать, при попытке их использования содержимое внутри тега шаблона не отображается.

Если я использую div, я могу отображать продукты под каждой категорией. Но это не очень хорошо работает внутри стола.

Мой шаблон:

<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>