如何在 ngFor 中一次只显示一里 Angular

Question

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

你可以在 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>

如何在 ngFor 中一次只显示一里 Angular

How to show only one li at a time inside ngFor Angular

click

show

hide

ngfor

angular