중첩 된 ngfor이있는 템플릿 사용

Question

Angular4 ReactiveForm (사용중인 버전)을 사용하여 양식을 만듭니다. 코드, 연도 및 카테고리 목록이있는 양식은 어디에 있습니까?

홈페이지 형태 :

• 코드
• 년
• 카테고리 []
  • 코드
  • 제품 설명
  • 주문
  • 제품 [] ,
    • 코드
    • 제품 설명
    • 가격

하지만 다음과 같은 방법으로 형태, 카테고리 목록과 각 범주의 제품을 표시하기 위해 노력하고있어 것 모든 행이 있어야하며 동일한 표에 모두 표시됩니다 (예).

<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를 사용하면 각 카테고리 아래에 제품을 표시 할 수 있습니다. 그러나 테이블 안에서는 잘 작동하지 않습니다.

내 템플릿 : template이 V4에서 사용되지 않는 된 이후 모든

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

Answer 1

첫째, 당신은 ng-template를 사용해야합니다.

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

그리고 products을 위해 : 당신이 categoryformGroupName로 포장해야한다

ERROR Error: Cannot find control with path: 'ARRAY_NAME -> FORM_CONTROL_NAME'

이 문제를 해결하려면 다음 브라우저의 콘솔에 보면

아마,이 같은 오류를 볼 수 있습니다 :

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

component 파일에 올바른 힌지