Как показать только один li за раз внутри ngFor Angular

Question

У меня есть код ниже, который отображает значок как часть тега привязки, и по щелчку я показываю список, упомянутый ниже, с тегом li.Проблема здесь в том, что li ассоциируется с одним ngFor, скажем, когда i = 2, li создается дважды, когда i = 3, li создается трижды.Как показывать только один li одновременно и скрывать другие .?

<div *ngFor="let person of persons; let i = index ">
    <div>{{person.name}}</div>
    <a href='#' data-target='dropdown3' class="sharebtn" (click)="shareIconClicked($event, i);"></a>
    <ul id='dropdown3' [ngClass]="{'popupShare': showPopup == true}">
        <li><a>Copy Message</a></li>
    </ul>
</div>

Answer 1

вы можете использовать ngIf в теге li

<div *ngFor="let person of persons; let i = index ">
              <div>           
                   {{person.name}}
              </div>
            <a href='#' data-target='dropdown3' class="sharebtn" (click)="shareIconClicked($event, i);"></a>
              <ul id='dropdown3' [ngClass]="{'popupShare': showPopup == true}" >
                <li *ngIf="i<1"><a >Copy Message</a></li>
              </ul>

        </div>