如何根据 p-table 中的列值显示或隐藏编辑按钮

Question

当 p-table

中的列 srcSysName 值 = "ANO" 时，如何显示或隐藏编辑按钮

这是代码

<ng-template pTemplate="body" let-ACC_LIST let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="ACC_LIST">
<td>
    {{ACC_LIST.accntNum}}
</td>
 <td>
      <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="ACC_LIST.shortName">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{ACC_LIST.shortName}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>{{ACC_LIST.srcSysName}}</td>
            <td style="text-align:center">

                <button *ngIf="!editing"  pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil"
                    (click)="onRowEditInit()" class="p-button-rounded p-button-text"></button>
                
            </td>
        </tr>
    </ng-template>

Answer 1

能否在您的编辑按钮中添加 *ngIf="ACC_LIST.srcSysName === 'ANO'"？

<ng-template pTemplate="body" let-ACC_LIST let-editing="editing" let-ri="rowIndex">
  <tr [pEditableRow]="ACC_LIST">
    <td>{{ACC_LIST.accntNum}}</td>
    <td>
      <p-cellEditor>
        <ng-template pTemplate="input">
          <input pInputText type="text" [(ngModel)]="ACC_LIST.shortName" />
        </ng-template>
        <ng-template pTemplate="output"> {{ACC_LIST.shortName}} </ng-template>
      </p-cellEditor>
    </td>
    <td>{{ACC_LIST.srcSysName}}</td>
    <td style="text-align: center">
      <button *ngIf="ACC_LIST.srcSysName === 'ANO'" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit()" class="p-button-rounded p-button-text"></button>
    </td>
  </tr>
</ng-template>

Answer 2

<td style="text-align:center">
    <button *ngIf="ACC_LIST.shortName === 'ANO'"  pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit()" class="p-button-rounded p-button-text"></button>                
</td>

如何根据 p-table 中的列值显示或隐藏编辑按钮

how to show or hide edit button based on column value in p-table

primeng

angular

primeng-datatable