Angular 什么'；在表格中动态插入行的正确方法是什么？

我试图在表中以Angular插入一行，以显示单击行中对象的信息。数据是从服务获取的。我尝试过不同的方法，这是最接近我的方法。不幸的是，renderR2.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>

{{票证[“AsstDoc.ProcState”]}
{{票证[“AsstDoc.DocDate”]}
{{ticket[“AsstDoc.CustName”]}{{ticket[“AsstDoc.DeliveryAddrNo”]| | ticket[“Addr.Line1”]}
{{ticket[“AsstDoc.IntermedText”]| ticket[“AsstDocItem.IntermedText”]| | ticket.json}

onClick：

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

createInfoBox（$event，index，ticket）{
this.renderer.selectRootElement（`row\${index}'）.insertAdjacentHTML（'afterend'，'inserted content'）；
}

我也尝试过，使用一个指令应该找到所有的行并创建一个结果查询列表，然后我可以从中检索单击行的索引，并创建一个同级。查询列表显示为空

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

@指令({
选择器：“tr”
})
导出类行{
构造函数（公共viewContainerRef:viewContainerRef）{}
}
@ViewChildren（行）子对象：QueryList；
ngAfterViewInit（）{
console.log（this.children）
this.children.changes.subscribe（（comps:QueryList）=>
{
控制台日志（“comps”，comps）；
});
}

---

我今天看到的所有示例都让我感到困惑，在我的情况下，正确的方法是什么？

您可以将tr包装在ng模板中，然后使用布尔+ngIf渲染/取消渲染包含其他信息的新行

// 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;
}

//component.html
{{票证[“AsstDoc.ProcState”]}
{{票证[“AsstDoc.DocDate”]}
{{ticket[“AsstDoc.CustName”]}{{ticket[“AsstDoc.DeliveryAddrNo”]| | ticket[“Addr.Line1”]}
{{ticket[“AsstDoc.IntermedText”]| ticket[“AsstDocItem.IntermedText”]| | ticket.json}
插入内容
//组件技术
createInfoBox（票证）{
//切换其他行的渲染
ticket.showAdditionalInfo=！ticket.showAdditionalInfo；
}

---

注意：如果要在新行打开时关闭所有打开的行，则需要附加逻辑

是否需要执行以下操作：

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

{{票证[“AsstDoc.ProcState”]}
{{票证[“AsstDoc.DocDate”]}
{{ticket[“AsstDoc.CustName”]}{{ticket[“AsstDoc.DeliveryAddrNo”]| | ticket[“Addr.Line1”]}
{{ticket[“AsstDoc.IntermedText”]| ticket[“AsstDocItem.IntermedText”]| | ticket.json}
{{infoRows[i].SomeField
…更多tds。。。

在组件中：

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
}

infoRows=[]；
恩戈尼尼特（）{
对于（int i=0；i

---

所以所有的行都在那里。你可以隐藏它们，或者*ngi如果它们在单击之前不显示。然后你将数据填充到后台数组中，你可以根据索引在tr中绑定到该数组。

我最后用ng bootstrap设置了一个模式窗口，它看起来比我试图实现的更好，感觉也更好在上面