Номер упорядоченного списка HTML все еще остается на удалении - PullRequest
Новая
       7

Номер упорядоченного списка HTML все еще остается на удалении

0 голосов
/ 30 августа 2018

Я пытаюсь реализовать функциональность, которая будет отображать список предметов сбоку. При нажатии на элемент они исчезают. Я хочу иметь упорядоченный список, в котором перед каждым элементом указан номер (1,2,3 ..) соответственно.

HTML: 

 <ol type ="1">
    <li *ngFor="let item of getSlices()">
      <button class="btn" (click)="deselect(item)" *ngIf="item.selected">
        <i class="fa fa-close"> {{ item.displayName }} </i>
      </button> 
    </li>
  </ol>

CSS: 

.btn {
  border: none;
  padding: 0;
  background: none;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

В моей текущей реализации содержимое элемента исчезает при щелчке, но число (1,2 ..) перед элементом все еще остается там.

Это работает, если я добавлю следующий class = "selection-list" к тегу и получу следующее css: 

.selection-list {
  list-style: none;
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 15px;
  color: #555;
  padding-left: 23px;
  text-transform: capitalize;
}

Но в этом случае цифры вообще не появляются.

Я просто хочу список вроде 

   1. x apple
   2. x banana
   3. x pear

Текущий режим работы при нажатии на банан: 

  1. x apple
  2.
  3. x pear

Ожидаемый результат при нажатии на банан: 

  1. x apple
  2. x pear

Как это можно сделать? Любые идеи будут оценены!

1 Ответ

0 голосов
/ 30 августа 2018

Перепишите шаблон, используя ng-container, чтобы невыбранные элементы вообще не отображались: 

<ol type="1">
  <ng-container *ngFor="let item of getSlices()">
    <li *ngIf="item.selected">
      <button class="btn" (click)="deselect(item)" >
        <i class="fa fa-close"> {{ item.displayName }} </i>
      </button> 
    </li>
  </ng-container>
</ol>

Пока он есть, для каждого элемента в getSlices() есть элемент <li> - пустой для невыбранных, но присутствующий в DOM. Вот почему там есть цифры. С этим переписыванием вы полностью пропускаете эти <li>.

...