CODEWITHSUNDEEP
htmlionic-frameworkionic3angular5
Victor York
Victor York

Reputation: 1681

Troube using ngFor to correctly iterate array

Im trying to iterate through an array which returns "notes" as seen below. I have two fields called state and baseType which mean the following:

state: The number of messages to show

baseType: The number of messages to show colored

Im able to print the first three colored (check HTML) but I dont know how to print only the 4th note or however many come afterwards uncolored. I print all 4 of them again but uncolored.

What I have so far

enter image description here

CONTROLLER

private dynamicGraphicOrders(productOrderRoot: ProductOrderRoot) {

    const dynamicOrders = productOrderRoot.productOrder.getAllProductsOrder()
      .filter(item => item.priority === "Dinámico");

    dynamicOrders.forEach(order => {
      this.activationDeadlinesGraphicViewModel.phoneNumber = order.description;
      this.activationDeadlinesGraphicViewModel.orderDate = order.orderDate;
      this.activationDeadlinesGraphicViewModel.expectedCompletionDate = order.expectedCompletionDate;
      this.activationDeadlinesGraphicViewModel.state = Number(order.state);
      this.activationDeadlinesGraphicViewModel.baseType = Number(order.baseType);
      this.getOrderNotes(order);
      this.phoneNumberStepsUnfinished(order);
    });

  }

private getOrderNotes(orderNotes: ProductOrderModel) {
    const notes = orderNotes.note.getAllNotes();

    notes.forEach(note => {
      this.activationDeadlinesGraphicViewModel.orderNotes.push(
        note.text
      );
    });
  }

HTML

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

Upvotes: 0

Views: 29

Answers (1)

EZbrute
EZbrute

Reputation: 428

I would advise you "activating" a css class if the index is smaller than baseType. So your code could look something like this:

<ng-container *ngFor="let orderNotes of activationDeadlinesGraphicViewModel.orderNotes; let i = index;">
    <ion-row>
        <ion-item *ngIf="activationDeadlinesGraphicViewModel.state > i">
            <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>{{ orderNotes }}</span>
            </ion-col>
        </ion-item>
    </ion-row>
</ng-container>

Upvotes: 1

Related Questions