如何使用 ngFor 一次只显示一个 ul答案

【问题标题】：How to show only one ul at a time in angular using ngFor如何使用 ngFor 一次只显示一个 ul
【发布时间】：2018-11-27 05:26:38
【问题描述】：

我有上面的图像，其中有添加人员按钮，单击添加人员，创建人员 1 行，依此类推。在每一行的右端，我有一个分享图标，点击一个图标，我想打开一个 ul 元素。问题是显示的弹出窗口数量取决于行数。如果添加 5 行，则显示 5 个弹出窗口。理想情况下，我只需要显示一个弹出窗口，对于第 4 行，它应该是带有 33 的弹出窗口（基本上是该特定行的弹出窗口）。我尝试添加 *ngIf = i> 1 条件，但是每次只显示 00 的弹出窗口，这是不正确的，因为弹出窗口的位置将始终与 Person 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>

下图表示添加 ngIf = 'isFirst' 后的单个弹出窗口。我点击了 Person 4 分享图标。如果我单击 Person 3 share 或 Person 5 share 图标，弹出窗口始终位于第一行。

【问题讨论】：

尝试在popup html的父div中添加*ngIf = i == 0这样的条件
弹出代码放置在 ul 元素内。弹出的Paren div是什么意思？
不起作用。从第二次点击开始，这不会显示输入字段和共享图标
哪个版本的角度？

【解决方案1】：

只需像这样使用*ngFor 添加检查first -

<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

【讨论】：

让 i = index 怎么样？我应该删除它吗？
如果不使用你可以删除，完全取决于你。否则，您可以通过 ; 分隔符同时使用两者
我做了两个改变，
和 *ngIf='first' 。弹出窗口现在不显示
像这样更改<div *ngFor="let person of persons; let i = index; first as isFirst"> and *ngIf='isFirst'
实际上它显示了一个弹出窗口。但我面临着与我所面临的问题相同的问题。弹出窗口始终显示在第一个位置，而与我单击的图标无关。我添加了一张图片，点击了 Person 4 共享图标以便更好地理解。请帮忙。

【解决方案2】：

您应该尝试像这样的 Angular 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>

【讨论】：

根据上面给出的示例创建两个函数 sharteWithFacebook 和 shareWithWhatapp，其中一个人作为参数，您将获得点击分享按钮的人
我不想使用 mat menu 。我试图从我现有的代码本身中找出答案。
因此，您必须为每一行的弹出窗口提供唯一的弹出窗口 ID，并且共享按钮应根据单击的行调用该 ID。
这就是我正在做的。共享按钮弹出窗口和共享图标具有唯一的 id。正如您在代码中看到的那样，我已经为
标签和
标签绑定了 {{i}}，但仍然无法正常工作。
如果点击了Person 4的分享图标，则只显示第3个弹窗，因为i=3，但全部显示。