Angular 如何在NGF中一次只显示一个li

我有下面的代码，它将图标显示为锚定标记的一部分，单击它，我将显示下面提到的带有li标记的列表。这里的问题是因为li与一个ngFor关联，比如当i=2时，li被创建两次，当i=3时，li被创建三次。如何一次只显示一个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>

{{person.name}

复制消息

您可以在li标签中使用ngIf

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

{{person.name}

复制消息

您是否尝试添加

*ngIf='i==0'

？尝试更改

id

，因为多个元素将具有相同的

id

。请尝试

id=“dropdown{{i}}”

代码看起来很好一些您可能缺少的小东西，如右括号（棘手的问题有适当的html）。您能帮我解决这个问题吗？不客气，我很高兴您的问题得到了解决。我这里有一个问题。问题是每次列表总是显示在位置0上，与我单击的图标无关。如果我单击了第三个图标，它应该显示在第三个位置