如何在满足特定条件时将 link 隐藏在 Angular5/HTML 中

Question

我在 Angular5/html 工作。我有点卡在某一点上。

我有一个可以添加不同帐户的页面。我有一个 link 来删除这些帐户。现在我希望 link 仅在添加超过 1 个帐户时显示。对于仅添加的 1 个帐户，我不希望显示我的帐户删除 link。

我如何将此条件合并到下面的代码中？我的意思是如果我使用 ngif 但我将如何响应 ngif 来隐藏帐户删除 link？

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

Answer 1

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

我们可以通过数组Account.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>

如何在满足特定条件时将 link 隐藏在 Angular5/HTML 中

How to hide link in Angular5/HTML when a certain condition is fulfilled

angular

html

hidden

angular-ng-if