Question

我在角度4环境中有一个场景，我需要同时添加/删除多个成员，所以在一个ngFor循环中我有多个div但我想选择那些我点击的div并且肯定我＆＃39; ll在任何给定的时间点击多个div。我只能解决这个问题，这意味着我只能选择任意一个div。

请找到代码段：

<div class="gp-row tomato-grower flexbox" *ngFor="let item of data.nonmembArray;let i=index">
                <div class="pack flexbox" [ngClass]="{'active': clickedItem === i }" (click)=selectNonMember(i)>
                    <img src="url" alt="Tomato Grower" class="circle-with-border" height="64" width="64">
                    <div class="text">
                      <div class="name">{{item.profile.first_name +' '+ item.profile.last_name | slice:0:13}}</div>
                      <div class="city">Hyd</div>
                      <div class="phone">+91 7897897891</div>
                    </div>
                </div>

功能实现：

  selectNonMember(i:number)
  {
    this.clickedItem =i; 
    // console.log(i);
  }

和css ::

 .active
  {
    border: 3px solid grey;
  }

请解决此问题。

Answer 1

您可以通过在同一元素中使用ngFor和事件绑定来避免此问题，这样您就可以根据用户点击的位置传递和显示类

<div class="gp-row tomato-grower flexbox" >
  <div class="pack flexbox"
       *ngFor="let item of data.nonmembArray;let i=index" 
       [ngClass]="{'active': clickedItem === i }" 
       (click)="clickedItem = i">
    <img src="url" alt="Tomato Grower" class="circle-with-border" height="64" width="64">
    <div class="text">
      <div class="name">{{item.profile.first_name +' '+ item.profile.last_name | slice:0:13}}</div>
      <div class="city">Hyd</div>
      <div class="phone">+91 7897897891</div>
    </div>
  </div>

你也错过了在（点击）

中调用的函数周围的一些“”

在for4循环中选择多个div，以获得angular4中的组添加/删除功能

1 个答案: