HTML 有序列表编号仍停留在删除状态

Question

我正在尝试实现将显示元素的侧 View 列表的功能。单击该元素时，它们会消失。我想要一个有序列表，其中每个元素之前分别有一个数字 (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

如何做到这一点？任何想法将不胜感激!

Answer 1

使用 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>

当它停留时，有一个 <li> getSlices() 中每个元素的元素- 对于未选中但仍存在于 DOM 中的为空。这就是为什么那里有数字的原因。通过此重写，您可以跳过那些 <li>完全。