Continue index order of two seperate arrays

Issue

I have an object which has "X" arrays (please note that these can be larger or smaller):

note: PONotes
allNotes: Array(6)
0: PONote {_text: "Contratación", _date: "", _author: ""}
1: PONote {_text: "Acordamos día de instalación con el técnico de Jazztel", _date: "", _author: ""}
2: PONote {_text: "Instalación y entrega de equipos. Ya puedes Navegar. Iniciamos la portabilidad de tu linea fija", _date: "", _author: ""}
3: PONote {_text: "Linea activada el día de tu portabilidad", _date: "", _author: ""}
4: PONote {_text: "Iniciamos la portabilidad de tu línea móvil", _date: "", _author: ""}
5: PONote {_text: "Introduce Nueva Sim el día de tu portabilidad", _date: "", _author: ""}
length: 6
__proto__: Array(0)
__proto__: Object

I have seperated this object into two arrays with the following function:

private getOrderNotes(orderNotes: ProductOrderModel) {
    this.activationDeadlinesGraphicViewModel.phoneNumberOrderNotes = orderNotes.note.getAllNotes()
    .slice(0, this.activationDeadlinesGraphicViewModel.state);

    this.activationDeadlinesGraphicViewModel.cellphoneNumberOrderNotes = orderNotes.note.getAllNotes()
    .slice(-this.activationDeadlinesGraphicViewModel.type);
  }

state and type in the slice gives me the number of items I need for each array.

This is the array for this.activationDeadlinesGraphicViewModel.phoneNumberOrderNotes

(4) [PONote, PONote, PONote, PONote]
0: PONote {_text: "Contratación", _date: "", _author: ""}
1: PONote {_text: "Acordamos día de instalación con el técnico de Jazztel", _date: "", _author: ""}
2: PONote {_text: "Instalación y entrega de equipos. Ya puedes Navegar. Iniciamos la portabilidad de tu linea fija", _date: "", _author: ""}
3: PONote {_text: "Linea activada el día de tu portabilidad", _date: "", _author: ""}
length: 4
__proto__: Array(0)

This is the array for this.activationDeadlinesGraphicViewModel.cellphoneNumberOrderNotes

(2) [PONote, PONote]
0: PONote {_text: "Iniciamos la portabilidad de tu línea móvil", _date: "", _author: ""}
1: PONote {_text: "Introduce Nueva Sim el día de tu portabilidad", _date: "", _author: ""}
length: 2
__proto__: Array(0)

I have to print this in an ordered list have the first array numbering from 1 to 4 and the second array from 5 to 6.

Since they are in seperate arrays im printing the index and adding +1 so it doesnt start at 0. For the first array it works like a charm but since the second array starts from 0 again I dont know how to change the index to the next number that I need based on the last array.

<ng-container *ngFor="let phoneNumberOrderNotes of activationDeadlinesGraphicViewModel.phoneNumberOrderNotes; let i = index;">
    <ion-row>
        <ion-item>
            <ion-col col-1>
                <span [class.numberCircleFilled]="activationDeadlinesGraphicViewModel.baseType > i"
                    [class.numberCircleUnfilled]="activationDeadlinesGraphicViewModel.baseType <= i">
                    {{ i+1 }}
                </span>
            </ion-col>
            <ion-col col-11>
                <span>{{ phoneNumberOrderNotes.text }}</span>
            </ion-col>
        </ion-item>
    </ion-row>
</ng-container> 

<ng-container *ngFor="let cellphoneNumberOrderNotes of activationDeadlinesGraphicViewModel.cellphoneNumberOrderNotes; let i = index;">
    <ion-row>
        <ion-item>
            <ion-col col-1>
                <span [class.numberCircleFilled]="activationDeadlinesGraphicViewModel.baseType < i"
                    [class.numberCircleUnfilled]="activationDeadlinesGraphicViewModel.baseType >= i">
                    {{ i+1 }}
                </span>
            </ion-col>
            <ion-col col-11>
                <span>{{ cellphoneNumberOrderNotes.text }}</span>
            </ion-col>
        </ion-item>
    </ion-row>
</ng-container>

enter image description here

The last two should be 5 and 6.

Solution

Add phoneNumberOrderNotes.length to your last i to get consecutive numbering.

Answered By – iAmOren

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.