Как показать только один ul за раз в угловых, используя ngFor

Question

У меня есть изображение выше, на котором есть кнопка «Добавить человека», при нажатии кнопки «Добавить человека» создается строка «Человек 1» и так далее.В правом конце каждой строки у меня есть значок общего доступа, по щелчку значка я хочу открыть элемент ul.Проблема в том, что количество отображаемых всплывающих окон зависит от количества строк.Если добавлено 5 строк, отображаются 5 всплывающих окон.В идеале мне нужно, чтобы отображалось только одно всплывающее окно, для строки Person 4 это должно быть всплывающее окно с 33 (в основном всплывающее окно присутствует для этой конкретной строки).Я попытался добавить условие * ngIf = i> 1, но всплывающее окно с цифрой 00 отображается только каждый раз, что не правильно, поскольку позиция всплывающего окна всегда будет параллельна позиции человека 1.

<div>
    <div *ngFor="let person of persons; let i = index">
      <div>
        <div class="userIcon">
          <div>
            <img class="person-img" src="assets/images/person.png" alt="My Profile">
          </div>
          <div>
            <input id="form3" class="form-control" type="text">
            <label for="form3" class="">{{person.name}}</label>
          </div>
        </div>
      </div>
      <div>
        <div>
          <input id="form5" class="form-control" #enteramount type="text">

          <a class='dropdown-trigger sharebtn' href='#' data-target='dropdown{{i}}' (click)="shareIconClicked($event, i,  enteramount)"></a>
            {{i}}
          <ul id='dropdown{{i}}'  [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
            <li>  {{i}}
             Copy Message
            </li>

            <li>Whatsapp</li>

            <li>Email</li>

          </ul>
        </div>
      </div>

    </div>
  </div>

Нижеimage представляет одно всплывающее окно после добавления ngIf = 'isFirst'.Я щелкнул значок «Персона 4».Если щелкнуть значок «Общий доступ к человеку 3» или «Общий доступ к человеку 5», всплывающее окно всегда располагается в первом ряду.

Answer 1

Вы должны попробовать угловую функцию Mat-menu следующим образом.

<div *ngFor="let person of persons; first as isFirst">
   .... code

  <button mat-button [matMenuTriggerFor]="menu">Share</button>
   <mat-menu #menu="matMenu">
    <button mat-menu-item (click)="sharteWithFacebook(person)">Facebook</button>
    <button mat-menu-item (click)="shareWithWhatapp(person)">Whatsapp</button>
   </mat-menu>
</div>

Answer 2

Просто добавьте чек для first, используя *ngFor, как это -

<div *ngFor="let person of persons; first as isFirst">
....
            <ul id='dropdown{{i}}' *ngIf='first'  [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
...</ul>
</div>

Более подробно см. Официальные документы -

• https://angular.io/api/common/NgForOf