Question

我正在尝试实现将显示项目侧视图的功能。当单击该项目时，它们消失。我想要一个有序列表，其中每个项目前面都有一个数字（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>。

HTML有序列表编号仍保留删除

1 个答案: