Блог

Я перебираю элементы списка, чего я хочу добиться, так это отсутствия границы прямо на элементе, который является предыдущим (Сводка 2) к активному li (Mindmap 3), как показано на изображении, он всегда присваивает границу каждому элементу в неупорядоченном списке, я написал это условие if, в котором говорится назначить границу всем элементам li, имеющим индекс меньше длины неупорядоченного списка, а не элементу, который предшествует выбранному li, но он также присваивает границу — оставляем для того элемента, который в нашем случае является summary 2. Я думаю, что что-то не так с условием if, но я не смог выяснить, что?

 <ul class="nav nav-tabs">
  <li *ngFor="let tab of tabs; let i = index" (click)="selectTab(tab)" 
      [class.active]="tab.active"
      [class.border]="(i < tabs.length - 1) amp;amp; !(tabs[i 1]?.active)">
    <div>
      <div>
        <img class="icon" style="width: 18px;"
             src="../../../assets/icons/{{tab.icon}}.svg">
       {{tab.title}} {{i}}
    </div>
    </div>
  </li>
</ul>
  

Определения Css следующие.

 .active {
  border: 1px solid #eaeef0;;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid white;
  margin-bottom: -6px;
  height: 44px;
}

.border {
  border-right: 1px solid red;
}
  

Я думаю, вам не нужно выбирать предыдущий li элемент, чтобы удалить границу. Просто установите левую границу вместо правой и измените свой CSS, как показано ниже.

 li {
    border-left: 1px solid red;
}

li:nth-child(1) {
    border-left:none; /*First element should not have a left border*/
}

li.active {
    border-left: none;/*Border definition for active element*/
}