2 labels on 4 in hypertext links-CodePudding

My hypertext links are on all lines, I want to remove this hyperlink on "your previsous balance" and "your new balance"

In HTML

<tr *ngFor="let l of statementLines; let i = index">
   <td scope="col">
      <span *ngIf="l.dateOperation.length > 0">
      {{l.dateOperation | dateddmmyyyy | addleadingzeroesleft:'10'}}
      </span>
   </td>
   <td scope="col">
      <span *ngIf="l.dateOperation.length > 0">
      {{l.dateValue | dateddmmyyyy | addleadingzeroesleft:'10'}}
      </span>
   </td>
   <td scope="col">
      <a (click)="goToAnnexe(l); false;" href="#">
      {{l.libelle}}
      </a>
   </td>
   ...

My problem is here I think

<td scope="col">
      <a (click)="goToAnnexe(l); false;" href="#">
      {{l.libelle}}
      </a>
 </td>

In TS

goToAnnexe(annexe) {
    this.router.navigateByUrl("/portfolio/annexe/"   annexe.wholeLine.REFERENCEMOUV   "/"   annexe.wholeLine.NUM);
    console.log("text "   JSON.stringify(annexe));
}

I think the problem is with libelle but I don't see how to resolve it?

prepareDataForTemplate(res) {
    var libelle1 = this.translate.instant('5019');
    var libelle2 = this.translate.instant('5020');
    if (res.RETURNCODE == 'OKK00') {
        this.statementDate = res.OUTEXT.DATE;
        this.statementLines.push({
            dateOperation: "",
            dateValue: "",
            libelle: libelle1,
            sign: (res.OUTEXT.SOLD >= 0 ? ' ' : '-'),
            amount: res.OUTEXT.SOLD,
            wholeLine: {
                REFERENCEMOUV: ""
            }
        });
        for (var i = 0; i < res.OUTEXT.MVMESPECES.length; i  ) {
            this.statementLines.push({
                dateOperation: res.OUTEXT.MVMESPECES[i]['DATEOPER'],
                dateValue: res.OUTEXT.MVMESPECES[i]['DATEVALEUR'],
                libelle: res.OUTEXT.MVMESPECES[i]['LIBELLE'],
                sign: (res.OUTEXT.MVMESPECES[i].MONTANT > 0 ? ' ' : '-'),
                amount: res.OUTEXT.MVMESPECES[i].MONTANT,
                wholeLine: res.OUTEXT.MVMESPECES[i]
            });
        }
        this.statementLines.push({
            dateOperation: "",
            dateValue: "",
            libelle: libelle2,
            sign: (res.OUTEXT.SOLF > 0 ? ' ' : '-'),
            amount: res.OUTEXT.SOLF,
            wholeLine: {
                REFERENCEMOUV: ""
            }
        });
    } else {

    }
}

CodePudding user response：

A quick solution would be to check the l.libelle text value and conditionally return a hyperlink only if the value is not "your previous balance" or "your new balance"

<td scope="col">
   <ng-container *ngIf="l.libelle !== 'your previous balance' && l.libelle !== 'your new balance'; else elseNotDone">
     <a (click)="goToAnnexe(l); false;" href="#">
       {{ l.libelle }}
     </a>
   </ng-container>

   <ng-template #elseNotDone>
     <p>
       {{ l.libelle }}
     </p>
   </ng-template>
</td>