时间戳

首页 > 解决方案 > 如何根据 p 表中的列值显示或隐藏编辑按钮

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

问题描述

当 p 表中的列 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>

标签： angularprimengprimeng-datatable

解决方案

您能否在您的编辑按钮中添加 * 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>

推荐阅读