在 Angular 项目的 <ol> 中的 <li> 之间添加对象答案

【问题标题】：Add Objects between <li> in <ol> in an Angular Project在 Angular 项目的 <ol> 中的 <li> 之间添加对象
【发布时间】：2020-03-10 14:01:34
【问题描述】：

我在我的 Angular 项目的 component.html 中有这个

  <li *ngFor="let activity of dto.activities | sortHistoryActivity; trackBy: trackByFn">
    <span>
      <a (click)="scrollToHistoryActivity(activity.firstTaskId, activity.firstActivityId)">{{activity.title}}</a>
    </span>
    <p class="timestamp">{{activity.startTime | date:"dd.MM.yyyy, HH:mm:ss"}}</p>
  </li>
</ol>

我想在一定数量的 li 之间添加对象，这不会再次将 li 重置为 1，但会为每个添加的对象保持运行的数字。我要添加的对象不应该有数字。

不要太苛刻，因为这是我的第一个问题。

示例图片

所以我会尝试更详细：在这个应用程序中，对于每个动作，都会添加动作名称和动作编号。（按执行时间排序）现在我想在列表元素之一之间添加一些 HTML，而不重置（如图所示）

【问题讨论】：

我很难理解你的问题。你能试着改写一下吗？可以举个例子吗？
@sloth 我已经更新了这个问题，希望你现在能更好地理解它:)
@Cryptorian420 我认为你最好在 stackblitz 中创建一个现场演示。一点 HTML 和一张图片可以用 100 种不同的方式来解释。
@Cryptorian420 那么对象会有编号吗？活动？？

标签： angular typescript frontend

【解决方案1】：

给定以下 HTML：

<ol #orderedListRef>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>fifth</li>
  <li>sixth</li>
</ol>

下面的 Typescript Code 将以第四个列表项为例，并在其后面放置一些东西：

@ViewChild('orderedListRef') olRef: ElementRef<HTMLOListElement>

.
.
.

// get the native element via the ViewChild
const ol: HTMLOListElement = olRef.nativeElement;

// get the fourth list item that is a direct child of the ordered list
const fourthElement = ol.querySelector("li:nth-child(4)");

// create something you want to put after the list item
const divToAppend: HTMLDivElement = document.createElement("div");
// fill it with some HTML or text
divToAppend.innerHTML = "<h1>example text</h1>";

// place the element after your listItem
fourthElement.after(divToAppend);

这个例子的结果是：

<ol #orderedListRef>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <h1>example text</h1> <-----
  <li>fifth</li>
  <li>sixth</li>
</ol>

【讨论】：

【解决方案2】：

我认为您需要的是有条件地添加元素，您可以通过使用 angular 提供的 ng-container 组件来实现，如下所示：

<ol>
    <ng-container *ngFor="let activity of dto.activities | sortHistoryActivity; trackBy: trackByFn">
    <!-- if activity doesn't contain number -->
        <p *ngIf="!activity.number">Insert of html</p>

     <!-- if activity contains number -->
        <li *ngIf="activity.number">
            <span>
              <a (click)="scrollToHistoryActivity(activity.firstTaskId, activity.firstActivityId)">{{activity.title}}</a>
            </span>
            <p class="timestamp">{{activity.startTime | date:"dd.MM.yyyy, HH:mm:ss"}}</p>
        </li>
    </ng-container>
</ol>

【讨论】：

这有帮助，但并不是我想要的。我想要的是在前 3 个活动之后，添加一些不在

【解决方案3】：

如果数字很重要，我建议将其存储在模型中并控制显示的内容。

要直接回答您的问题，您可以使用start 属性说明ol 的起始编号。

<p>Example</p>
<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

<p>Insert of html</p>
<ol start="4">
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

这仍然需要你跟踪一些状态，所以我仍然认为最好将订单存储在你的模型中并将你的 HTML 绑定到模型中的订单号。

dto: {
  activities: {
    order: 1,
    name: 'Text'
  },
  // ... etc
}

<ul>
  <li *ngFor="let activity of dto.activities">
    {{activity.order}}. {{activity.name}}
  </li>
</ul>

【讨论】：