在 p 表的列中添加按鈕

Question

我正在嘗試在我的 p 表的某些列中添加按鈕，

實際上我在我的 html 中這樣做：

  <p-table [columns]="cols2" [value]="subflows">
                        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [ngStyle]="{'width': col.width}" [ngClass]='height'>
                    {{col.header}}
                </th>

            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [ngClass]="rowData.type ==='ERROR' ? 'red' : 'blue'">
                <td class="my-center-text" *ngFor="let col of columns; let i = index"
                    [attr.rowspan]="rowData.component.index === 1 ? 2 : 1"
                    [ngClass]="{'center' : (col.field ==='detail' || col.field ==='objet' || col.field ==='messageT' || col.field === 'etape')}">


                    {{rowData[col.field]}}
                    <!-- <p-column field="detail" header="" [style]="{'text-align':'center'}">
                         <ng-template let-row="rowData" pTemplate="body">
                            <button pButton style="height:30px;"    label="Détails"
                            (click)="show(rowData, i)" class="ui-button-secondary"></button>
                        </ng-template> 
                          </p-column> -->
                    
                          <button pButton style="height:30px;" *ngIf="col.field === 'detail'   " label="Détails"
                          (click)="show(rowData)" class="ui-button-secondary"></button>
  

                    <button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'objet'   "
                        (click)="objet($event,data)" class="ui-button-secondary"></button>

                    <button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'messageT'   "
                        (click)="checked($event,data)" class="ui-button-secondary"></button>

                </td>



            </tr>
        </ng-template>
    </p-table>

我不確定這是最好的方法，實際上我有一個問題，我的按鈕與 p-dialog 相關，實際上，當我單擊一個按鈕時，第一個按鈕正在打開一個 p-dialog，但是如果我再次單擊另一個按鈕，數據將直接添加到現有的 p 對話框中，我希望它為我單擊的每個新按鈕打開一個新的 p 對話框。

Answer 1

這個我用過一次。 您只需要使用列定義的content屬性。 像這樣

{
    headerText:'Action',
    content: function(row) {
        return $("<button></button>").puibutton({
            icon: 'ui-icon-pencil'
        });
    }
}