Как скрыть ссылку в Angular5 / HTML при выполнении определенного условия - PullRequest
Новая
       12

Как скрыть ссылку в Angular5 / HTML при выполнении определенного условия

0 голосов
/ 29 августа 2018

Я работаю в Angular5 / HTML. Я застрял в одной точке.

У меня есть страница, на которой я могу добавлять разные учетные записи. У меня есть ссылка для удаления этих учетных записей. Теперь я хочу, чтобы эта ссылка отображалась только при добавлении более 1 аккаунта. Только для 1 добавленного аккаунта я не хочу, чтобы в моем аккаунте была удалена ссылка.

Как я включу это условие в мой код ниже? Я имею в виду, если я использую ngif, но что я буду делать в ответ на ngif, чтобы скрыть ссылку на удаление учетной записи?

Также для условия в ngif я могу указать его здесь в html (что-то вроде этого, то счетчик равен 1 или я равен 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>

1 Ответ

0 голосов
/ 29 августа 2018

Вы можете использовать *ngIf для тега привязки.

Мы можем получить количество учетных записей, используя свойство length массива 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>
...