行をテーブルに動的に挿入する正しい方法は、角度でですか？

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> 

のonClick：

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

私はまた、私が取得することができ、そこからすべての行を検索し、結果のQueryListを作成する必要がありますディレクティブで、another approachを試してみましたクリックされた行にインデックスを付け、兄弟を作成します。クエリーリストは空になる。

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

だから、すべての行がそこにあります。クリックするまで表示されないように、それらを隠すことも、* ngすることもできます。次に、索引に基づいてtrでバインドできるシーン配列の背後にデータを移入します。