Добавить объекты между <li>в <ol>в Angular проекте

Question

У меня есть это в компоненте. html моего angular проекта

  <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, что снова не сбрасывает в 1., но сохраняет номер для каждого добавленного объекта. Объект, который я хочу добавить, не должен иметь номера.

Не будь слишком жестким sh, так как это мой первый вопрос.

изображение примера

Поэтому я постараюсь go более подробно: в этом приложении для каждого действия будет добавлено название действия с номером действия. (в порядке выполнения) Теперь я хочу добавить HTML между одним из элементов списка, без сброса номера (Как показано на рисунке)

Answer 1

Если номер важен, я бы рекомендовал сохранить его в модели и взять под контроль то, что отображается.

Чтобы ответить на ваш вопрос напрямую, вы можете указать начальный номер ol, используя start атрибут.

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

Answer 2

Учитывая следующее HTML:

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

Следующий код Typescript возьмет четвертый элемент списка в качестве примера и поместит что-то позади него:

@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>

Answer 3

Я думаю, что вам нужно условно добавить элементы. Вы можете добиться этого, используя компонент ng-container, предоставляемый angular следующим образом:

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