typescript - Lägga till <hr>/ HTML-element mellan sorterade element i array i Angular

Som i ämnet - jag har en array med sorterade element. Min funktion för att sortera element i arrayen:

private reorderOptions(filter: FormFilterConfig): void {
    const filterOptions: FormFilterOption[] = filter.formOptions
      .sort((x: FilterOption, y: FilterOption) => x.name > y.name ? 1 : -1);
    filter.formOptions = [
      ...filterOptions.filter((o: FormFilterOption) => o.isSelected),
      ...filterOptions.filter((o: FormFilterOption) => !o.isSelected)
    ];

html :

<component-checkbox *ngFor="let formControl of filteredFormControls[i]" 
  [formControl]="formControl">{{ getCheckboxName(i, formControl) }}
</component-checkbox>

Jag behöver på något sätt lägga till <hr>-väljaren mellan o.isSelected och !o.isSelected. Har någon en idé om hur man löser det?

Svar #1

Detta är något du kan göra i din HTML-mall som:

<div *ngFor="let item of items; let i = index">
  <hr *ngIf="shouldRenderHR(i)"/>
  <!-- render item here -->
</div>

Och sedan följande shouldRenderHR i TypeScript:

  public shouldRenderHR(i) {
    if (i == 0) return false;
    if (
       (this.items[i].isSelected && !this.items[i-1].isSelected) ||
       (!this.items[i].isSelected && this.items[i-1].isSelected)
    ) return true;

    return false;
  }