primeNG dataTable colspan tbody - solution

Question

PrimeNGドキュメントに記載されているヘッダーだけでなく、tbodyのcolスパンが必要なように、私はこの問題に遭遇しました。私はプログラムでそれを追加するためにいくつかの指示とJavascriptを使用しようとしました。ここでコードをデモンストレーションしています。私はこれが普遍的な解決策であり、みんなのために働くかどうかは分かりませんが、これは間違いなくあなたの問題解決のための出発点として機能します。

Answer 1

は、カスタムディレクティブを作成します。

colspan.ts 

import { Directive, ElementRef } from '@angular/core'; 

@Directive({ 
selector:'[inColSpan]', 
inputs:['description:inColSpan'] 
}) 

export class ColSpanDirective { 

constructor(private el: ElementRef) {} 

set description(desc:string){ 
    let row = document.createElement("tr"); 
    let data = document.createElement("td"); 
    data.colSpan = 3; 
    let description = document.createTextNode(desc); 
    data.appendChild(description); 
    row.appendChild(data); 
    this.insertAfter(this.el.nativeElement.parentNode.parentNode.parentNode,row); 
} 

insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling); 
} 
} 

次に、あなただけの指示でデータを渡すことができます。私は自分のコードを貼り付けています：

<p-dataTable [value]="products" [responsive]="true" styleClass="margin-top-20"> 

      <p-column field="productNames" header="Product Item" styleClass="item-width"> 
       <template let-col let-product="rowData" pTemplate type="body"> 
        <h4><tr>{{product[col.field][0]?.name}}</tr></h4> 
        <p inColSpan="{{ product['productDescriptions'][0]?.description }}"></p> 
       </template> 
      </p-column> 

      <p-column field="price" header="Price" styleClass="price-width"></p-column> 

      <p-column styleClass="select-width"> 
       <template pTemplate type="header"> 
        <span class="ui-column-title">Select</span> 
       </template> 
       <template let-col let-product="rowData" pTemplate type="body"> 
        <p-checkbox name="selectOrderItem" [value]="stringifyProductItem(product)" 
           [(ngModel)]="selectedProductItemStrings" 
           (onChange)="setSubTotal()"></p-checkbox> 
       </template> 
      </p-column> 

     </p-dataTable>