Angular表格如何移除“上期余额”“本期余额”行的超链接？

解决方案 #

你添加的两行余额数据（上期余额、本期余额）的dateOperation为空、wholeLine.REFERENCEMOUV也为空，只需要在渲染超链接的位置加条件判断即可，只有正常交易行才渲染超链接，余额行直接显示文本。

方法1：根据dateOperation判断 #

修改第三列的HTML代码如下：

<td scope="col">
  <ng-container *ngIf="l.dateOperation.length > 0; else plainText">
    <a (click)="goToAnnexe(l); false;" href="#">
      {{l.libelle}}
    </a>
  </ng-container>
  <ng-template #plainText>
    <span>{{l.libelle}}</span>
  </ng-template>
</td>

方法2：根据REFERENCEMOUV判断（更严谨，避免后续日期为空的正常交易被误判） #

<td scope="col">
  <ng-container *ngIf="l.wholeLine.REFERENCEMOUV; else plainText">
    <a (click)="goToAnnexe(l); false;" href="#">
      {{l.libelle}}
    </a>
  </ng-container>
  <ng-template #plainText>
    <span>{{l.libelle}}</span>
  </ng-template>
</td>

两种方案都可以实现需求：正常交易行显示可点击的超链接，上期余额、本期余额两行只显示纯文本，无跳转链接。

内容的提问来源于stack exchange，提问作者user16922609