如何在满足特定条件时隐藏Angular5 / HTML中的链接

问题描述 投票:1回答:1

我在Angular5 / html工作。我有点陷入困境。

我有一个页面,我可以添加不同的帐户。我有一个删除这些帐户的链接。现在我希望只有在添加了多个帐户时才会显示该链接。仅添加了1个帐户,我不希望我的帐户删除链接显示。

我将如何在下面的代码中加入这个条件?我的意思是,如果我使用ngif,但我将如何回应ngif隐藏帐户删除链接?

同样对于ngif中的条件,我可以在html中指定它(类似于计数为1或i为0,因为计数在这里告诉帐号)或者我需要在我的ts文件中为它编写函数。

<li *ngFor="let ac of Accounts; let i = index;">
  <div class="header">
    <h2>{{'account.title' | translate : { count: i + 1 } }}</h2>
    <a [routerLink]="" (click)="removeAccount(i)">{{'account.remove' | translate}}</a>
  </div>
  <account [data]="ac" [id]="i"><account>
</li>
angular html5 hidden angular-ng-if
1个回答
3
投票

您可以在锚标签上使用*ngIf

我们可以通过使用数组Account.length的length属性获取帐户数,然后检查它是否大于> 1

仅当Accounts数组中有多于1个元素时,才会显示锚标记下方。

<li *ngFor="let ac of Accounts; let i = index;">
    <div class="header">
      <h2>{{'account.title' | translate : { count: i + 1 } }}</h2>
      <a *ngIf="Accounts.length > 1" [routerLink]="" (click)="removeAccount(i)">{{'account.remove' | translate}}</a>
    </div>
    <account [data]="ac" [id]="i">
      <account>
</li>
© www.soinside.com 2019 - 2024. All rights reserved.