代码之家 › 专栏 › 技术社区 › Nancy

如何使用ngFor在角度上一次只显示一个ul

angular javascript

0

Nancy · 技术社区 · 7 年前

我有上面的图片,其中有添加人按钮,点击添加人,人1行得到创建等等。在每行的右端,我有一个共享图标,点击一个图标,我想打开一个ul元素。问题是显示的弹出窗口数量取决于行数。如果添加了5行,则显示5个弹出窗口。理想情况下,我只需要一个弹出窗口来显示,对于人4行,它应该是33行的弹出窗口(基本上,弹出窗口是为特定行出现的)。我尝试添加*ngIf=I>1条件,但带00的弹出窗口每次都会显示,这是不正确的,因为弹出位置始终与人员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共享或Person 5共享图标,则弹出窗口始终位于第一行。

2 回复 | 直到 7 年前

1

0

Pardeep Jain 7 年前

只需添加支票 first 使用 *ngFor 像这样-

<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

2

0

Vijay Sankhat 7 年前

你应该试试这样的角度垫菜单功能。

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