在Angular中動態插入表格的正確方法是什麼？

-1

我想在Angular中的表中插入一行，目的是顯示點擊行中對象的信息。數據是從服務中獲取的。我試過不同的方法，this one是什麼讓我最接近。不幸的是，renderer2.setRootElement（）方法刪除了點擊行的內容。其次，它似乎像這樣的工作不是在Angular中推薦的。在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>'); 
    }

我也試過another approach，具有指令，應該找到所有的行，並創建結果的QueryList，從中然後我可以取回指向所點擊的行，並創建一個兄弟。 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); 
    }); 
}

我今天看到的所有例子都讓我感到困惑，對我而言，正確的方法是什麼？

來源

2017-10-04 javahaxxor

我最終用ng-bootstrap搭建了一個模式窗口，它看起來比我想要完成的更好，感覺更好 – javahaxxor

你可以換你TR在NG-模板然後用一個布爾值+ ngIf渲染/ unrender新行帶有附加信息的

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

注意：你需要額外的邏輯，如果你想關閉所有打開的行，當新行是開放

來源

2017-10-04 19:16:11 LLai

會是這樣的工作：

<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中綁定數據。

來源

2017-10-04 19:20:32 bgraham

在Angular中動態插入表格的正確方法是什麼？

回答

相關問題