테이블의 행을 각도로 동적으로 삽입하는 올바른 방법은 무엇입니까?

Question

클릭 한 행의 개체에 대한 정보를 표시하기 위해 표에 각도를 사용하여 행을 삽입하려고합니다. 데이터는 서비스에서 가져옵니다. 나는 다른 접근법을 시도했다. this one는 나에게 가장 가까운 것을 가지고있다. 불행히도 renderer2.setRootElement() 메서드는 클릭 한 행의 내용을 제거합니다. 둘째로 이것은 Angular에서 권장하지 않는 것처럼 작동하는 것처럼 보입니다.

템플릿 :

<tbody #tbody> 
    <tr class="row" *ngFor="let ticket of tickets; let i=index" (click)="createInfoBox($event, i, ticket)" id="row_{{i}}"> 
    <td class="col-md-1" id="ticket_state"> {{ ticket["AsstDoc.ProcState"] }}</td> 
    <td class="col-md-2" id="ticket_date">{{ ticket["AsstDoc.DocDate"] }}</td> 
    <td class="col-md-4" id="ticket_office">{{ ticket["AsstDoc.CustName"] }} {{ ticket["AsstDoc.DeliveryAddrNo"] || ticket["Addr.Line1"] }}</td> 
    <td class="col-md-4" id="ticket_shortdescr">{{ ticket["AsstDoc.IntermedText"] || ticket["AsstDocItem.IntermedText"] || ticket.json }}</td> 
    </tr> 
    </tbody> 

온 클릭 :

createInfoBox($event, index, ticket) { 
    this.renderer.selectRootElement(`#row_${index}`).insertAdjacentHTML('afterend', '<tr><td colspan="5">inserted content</td></tr>'); 
    } 

가 나는 또한 그때가를 검색 할 수있는 모든 행을 찾을 수 및 결과의 QueryList을 만들어야합니다 지시어로, another approach 시도 클릭 한 행의 색인을 생성하고 형제를 생성 할 수 있습니다. querylist는 비어있게된다.

@Directive({ 
    selector: 'tr' 
}) 
export class Rows { 
    constructor(public viewContainerRef: ViewContainerRef) { } 
} 

@ViewChildren(Rows) children: QueryList<Rows>; 
ngAfterViewInit() { 
    console.log(this.children) 
    this.children.changes.subscribe((comps: QueryList <Rows>) => 
    { 
    console.log("comps",comps); 
    }); 
} 

오늘 본 모든 사례에서 혼란스러워했지만 제 경우에는 올바른 접근 방법이 무엇입니까?

그런 다음 추가 정보와 함께 새 행 unrender/렌더링하는 부울 + ngIf를 사용 NG 템플릿에 TR을 포장 할 수

Answer 1

// component.html 
<tbody> 
    <ng-container *ngFor="let ticket of tickets"> 
     <tr (click)="createInfoBox(ticket)"> 
      <td class="col-md-1">{{ ticket["AsstDoc.ProcState"] }}</td> 
      <td class="col-md-2">{{ ticket["AsstDoc.DocDate"] }}</td> 
      <td class="col-md-4">{{ ticket["AsstDoc.CustName"] }} {{ ticket["AsstDoc.DeliveryAddrNo"] || ticket["Addr.Line1"] }}</td> 
      <td class="col-md-4">{{ ticket["AsstDoc.IntermedText"] || ticket["AsstDocItem.IntermedText"] || ticket.json }}</td> 
     </tr> 
     <tr *ngIf="ticket.showAdditionalInfo"> 
      <td colspan="5">inserted content</td> 
     </tr> 
    </ng-container> 
</tbody> 

//component.ts 
createInfoBox(ticket) { 
    // toggle render of additional row 
    ticket.showAdditionalInfo = !ticket.showAdditionalInfo; 
} 

참고 : 닫으려는 경우 추가 로직이 필요합니다 새 행이 열려있을 때 행을 열려있는 모든

Answer 2

것이 작품 같은 : 구성 요소에서

<ng-container *ngFor="let ticket of tickets; let i=index"> 
<tr class="row" (click)="updateInfoRow($event, i, ticket)" id="row_{{i}}"> 
    <td class="col-md-1" id="ticket_state"> {{ ticket["AsstDoc.ProcState"] }} </td> 
    <td class="col-md-2" id="ticket_date">{{ ticket["AsstDoc.DocDate"] }}</td> 
    <td class="col-md-4" id="ticket_office">{{ ticket["AsstDoc.CustName"] }} {{  ticket["AsstDoc.DeliveryAddrNo"] || ticket["Addr.Line1"] }}</td> 
    <td class="col-md-4" id="ticket_shortdescr">{{  ticket["AsstDoc.IntermedText"] || ticket["AsstDocItem.IntermedText"] ||  ticket.json }}</td> 
    </tr> 
    <tr class="info-row"> 
    <td>{{infoRows[i].SomeField</td> 
    ... more tds ... 
    </tr> 
</ng-container> 

:

infoRows = []; 

ngOnInit() { 
    for(int i = 0; i < tickets.length; i++){ 
    infoRows.push({}); 
    } 
} 

updateInfoRow(event, i, ticket) { 
    infoRow[i] = { myField, ticket.myField } // or set from the server 
} 

그래서 모든 행이 있습니다. 그냥 숨길 수도 있고 클릭 할 때까지 표시되지 않도록 할 수도 있습니다. 그런 다음 인덱스를 기반으로 tr에서 바인딩 할 수있는 장면 배열의 데이터를 채 웁니다.