简体   繁体   中英

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

how to show or hide edit button based when column srcSysName value = "ANO" in p-table

Here is the code

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

Can you please add * ngIf="ACC_LIST.srcSysName === 'ANO'" in your edit button?

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM