时间戳

首页 > 解决方案 > 如何使用 ngFor 一次只显示一个 ul

javascript - 如何使用 ngFor 一次只显示一个 ul

问题描述

我有上面的图像，其中有添加人员按钮，单击添加人员，创建人员 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 图标，弹出窗口始终位于第一行。

标签： javascriptangular

解决方案

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

推荐阅读