onCLick 列表项在 li 中添加“活动”类并从兄弟姐妹中删除——Angular 8答案

【问题标题】：onCLick list item Add 'active' Class in li and Remove from Siblings -- Angular 8onCLick 列表项在 li 中添加“活动”类并从兄弟姐妹中删除——Angular 8
【发布时间】：2020-06-22 14:17:43
【问题描述】：

默认第一个 li 将处于活动状态，如果单击任何 li 项目添加类“活动”并从兄弟姐妹中删除类

public items = [{
    value: 'All',
  },
  {
    value: 'Photos',
  },
  {
    value: 'Video',
  },
];

li .active {
  color: red;
}

<div *ngFor="let item of items" class="nav-li">
  <ul>
    <li class="value" [value]="item.value"><a href="">{{item.value}}</a></li>
  </ul>

</div>

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可以将点击的索引保存在变量中并相应地动态切换类，如下所述 -

<div class="nav-li">
  <ul>
    <li *ngFor="let item of items; let i = index" 
    [ngClass]="{'active': selectedItem === i}"
    [value]="item.value" 
    (click)='selectedItem = i;'>
      {{item.value}}
    </li>
  </ul>
</div>

selectedItem = 0;

Working Example

建议 - 如果不需要，请尝试在 li DOM 元素上迭代 *ngFor 而不是 DIV，但这样做会为每次迭代重复 div, ul,li 元素，这对于DOM 预期。

【讨论】：

谢谢！ @pardeep 耆那教

【解决方案2】：

.ts

    public items = [{
        value: 'All',
        active: ''
      },
      {
        value: 'Photos',
        active: ''
      },
      {
        value: 'Video',
        active: ''
      },
    ];
    
    changeStatus(index) {
    this.items = this.items.map((item, itemIndex) => {
    if(index === itemIndex) {
    item.active = 'active';
    } else {
item.active = '';
}
    return item;
    })
    }

.html

<div *ngFor="let item of items; index as i" class="nav-li">
  <ul>
    <li [class]="item.active" (click)="changeStatus(i)"  [value]="item.value"><a href="javascript:void(0);">{{item.value}}</a></li>
  </ul>

</div>

【讨论】：

如何在活动的@elonaire 中显示默认的第一个 li

【解决方案3】：

试试这个.. 请注意我已经从标签中删除了 href.. .html

<div *ngFor="let item of items; let i = index" class="nav-li">
    <ul>
        <li class="value" [ngClass]="getActiveClass(i)" [value]="item.value" 
           (click)="setActiveIndex(i)">
           <a>{{item.value}}</a>
        </li>
    </ul>
</div>

.ts

  var activeIndex;

  setActiveIndex(index) {
    this.activeIndex = index;
  }

  getActiveClass(i) {
    return this.activeIndex == i ? 'active' : '';
  }

.css

.active {
  color: red;
}

【讨论】：

在模板中调用带有绑定的方法绝不是一个好主意，每次更改检测运行时都会运行此方法。

【解决方案4】：

    **Html**
    <div *ngFor="let item of items; let i=index" class="nav-li">
      <ul>
        <li class="{{selectedIndex==i ? 'active':''}}" [value]="item.value"><a href="#" (click)="selectTag(i)">{{item.value}}</a></li>
      </ul>
    </div>
    
    **Ts**
     selectTag(index){
        this.selectedIndex = index;
      }

**.Css**

.active {
  color: red;
}

【讨论】：