어떻게 내가 각도 버전으로 프로젝트에서 일하고 있어요</p> <p>... 각도

Question

헤이 각도 마법사를 사용하여 테이블 행을 삽입합니다 4.0.0

나는 내 응용 프로그램 구성 요소 템플릿은 다음과 같은 구조를 가지고 : 응용 프로그램-VCR 템플릿에서

<table> 
    <thead> 
    <th>ID</th> 
    <th>Label</th> 
    <th>Action</th> 
    </thead> 
    <tbody> 
    <ng-container *ngFor="let item of items"> 
     <tr app-vcr [item]="item"></tr> 
    </ng-container> 
    </tbody> 
</table> 

:

<td>{{item.id}}</td> 
<td>{{item.label}}</td> 
<td><button (click)="viewDetails()">Details</button></td> 

나는 다른 앱 VCR-세부 componen이 다음 템플릿 t :

응용 프로그램-VCR 구성 요소에서

<tr> 
<td colspan="99"> 
    <div> 
    {{item.details}} 
    </div> 
</td> 
</tr> 

, I합니다 (중 ViewDetails을 구현)이와 방법

import { Component, OnInit, ViewContainerRef, Input, Injector,ComponentFactoryResolver } from '@angular/core'; 

import { VcrDetailsComponent } from 'components/VcrDetailsComponent'; 

... 

constructor(
private elem:ViewContainerRef, 
private r: ComponentFactoryResolver 
) {} 

viewDetails(){ 
let factory = this.r.resolveComponentFactory(VcrDetailsComponent); 
this.elem.createComponent(factory) 
} 

난 데 문제는 내가를 클릭 할 때이다 세부 정보보기 버튼, 그것은 세부 구성 요소를 삽입하지만, 이런 식으로 삽입 : 나는 또한 속성 선택을 할 앱-VCR-자세한 내용은 선택을 변경하려고했습니다

<app-vcr-details> <--- ** this gets inserted, which is breaking the table ** 
<tr> 
    <td colspan="99"> 
    <div> 
     Show the item details here! 
    </div> 
    </td> 
</tr> 
</app-vcr-details> 

,하지만 내가 t 얻을 그의 :

<div> <--- ** this gets inserted, which is also breaking the table ** 
<tr> 
    <td colspan="99"> 
    <div> 
     Show the item details here! 
    </div> 
    </td> 
</tr> 
</div> 

정확하게 어떻게 세부 테이블 행을 삽입 할 수 있습니까?

감사합니다.

Answer 1

테이블 행의 구성 요소 대신 전체 테이블 구성 요소가 있어야한다고 제안합니다.