Question

我正在尝试实现一个用户可以选择元素的列表。我可以选择项目，但是＆＃34;活跃的＆＃34; class不会从之前的类中删除。如果我点击所有这些，那么将全部选中。我正在开发使用twitter bootstrap和angular

<ul class="list-group" id="list-opponents">
  <li *ngFor="let opponent of model.availableOpponents; let first = first" [class.active]="first" id="{{ opponent.id }}" data-toggle="list" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">                
    <span class="mr-3">{{ opponent.name }}</span>
    <img class="figure-img img-fluid rounded" src="{{opponent.photoUrl}}" />
  </li>          
</ul>

生成的html如下：

<ul _ngcontent-c1="" class="list-group" id="list-opponents">
  <!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object"}-->
  <li _ngcontent-c1="" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" data-toggle="list" id="1">                
    <span _ngcontent-c1="" class="mr-3">Me</span>
    <img _ngcontent-c1="" class="figure-img img-fluid rounded" src="../../../assets/ana.JPG">
  </li>
  <li _ngcontent-c1="" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-toggle="list" id="2">                
    <span _ngcontent-c1="" class="mr-3">You</span>
    <img _ngcontent-c1="" class="figure-img img-fluid rounded" src="../../../assets/tininha.JPG">
  </li>          
</ul>

更新：你可以在这里找到一个jsfidle：https://jsfiddle.net/Bonomi/Lkz161er/7/

Answer 1

我弄清楚问题是什么。我不能使用ul li元素，我用div和a解决了问题：

<div class="list-group" id="list-opponents">
    <a *ngFor="let opponent of model.availableOpponents; let first = first" [class.active]="first" id="{{ opponent.id }}" data-toggle="list" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
      <span class="mr-3">{{ opponent.name }}</span>
      <img class="figure-img img-fluid rounded" src="{{opponent.photoUrl}}" />
    </a>          
</div>

现在有效。

列表项选择无效

1 个答案: