Use multiple ngFor for same array

Question

Angular/Ionic noob here. I have looked everywhere online (especially this site as it has been so helpful) and cannot find someone with this same issue. What I want to do is have a single array of tasks in my ts component and then have four different places in my html template where I display those tasks depending on what kind of task it is (using ngif to determine which block they should end up in).

I have a wizardTasks array of tasks in my ts component and each task is an object with a name, a type, a frequency, and an "additional" property containing any extra info about the task.

So, from that array, my code to display that looks something like this:

<ion-item-group>
  <ion-item *ngFor="let task of wizardTasks">
    <ion-label *ngIf="task.frequency==='oneTimeOnly' && task.type==='biological/physical'">{{task.name}}</ion-label>
    <ion-label *ngIf="task.frequency==='everyDay' && task.type==='biological/physical'">{{task.name}} every day</ion-label>
    <ion-label *ngIf="task.frequency==='daysOfWeek' && task.type==='biological/physical'">{{task.name}} every {{task.additional}}</ion-label>
    <ion-label *ngIf="task.frequency==='specificDate' && task.type==='biological/physical'">{{task.name}} on {{task.additional}}</ion-label>
  </ion-item>
</ion-item-group>

Except there are FOUR of these blocks where the ngIf task.type is one of the four groups.

The problem I am having is that when I do this it is adding a space for each entry in all four places. So if I have four tasks, one of each type, it would display each task in the appropriate block, but it would have spaces in each block for where the other tasks would be if they were in that block.

I hope that makes sense. Please let me know if I need to add anything else and thank you for any help!

screenshot if it helps...

wizard tasks

Can you clarify what you mean when you say there are four of these blocks? I'm not sure what your original code looks like from your description, but it sounds like you might be able to solve your stated problem by using <ng-container> for the wrapping blocks if I'm understanding you right. You could also potentially enhance some of your template with an [ngSwitch]. — Mike Hill
– Mike Hill, Commented Aug 16, 2018 at 16:37
absolutely! sorry I should have added the screenshot in the first place. So the add button on the top right for each header pops up a modal to add a task for that particular category. then the tasks are updated each time you come back to the main screen. You can see that it is still looping under each header and adding the tasks to each one but only displaying them if they are actually of that type (step1 was biological, step2 was emotional, etc.). — mateotherock
– mateotherock, Commented Aug 16, 2018 at 16:47
Ah so you just need to prevent showing the <ion-item> if the task type doesn't match? You can create a filter for the *ngFor statement. Component code: getWizardTasks(type: string): WizardTask[] {return this.wizardTasks.filter(task => task.type === type);}. Template attribute: *ngFor="let task of getWizardTasks('biological/physical')". — Mike Hill
– Mike Hill, Commented Aug 16, 2018 at 17:28
@MikeHill thank you so much! Can you add that as an answer and I'll mark it? That totally worked. I had no idea you could do that with an ngFor. — mateotherock
– mateotherock, Commented Aug 16, 2018 at 17:44

Mike Hill · Accepted Answer · 2018-08-16 17:49:15Z

As per the comments on the original question, it looks like you are rendering all <ion-item> (wizardTask) elements for each category regardless of whether or not they fit into the category. You can fix this by filtering the wizardTasks list when using the *ngFor directive:

/* Component */
getWizardTasks(type: string): WizardTask[] {
    return this.wizardTasks.filter(task => task.type === type);
}

/* Template */
<ion-item-group>
    <ion-item *ngFor="let task of getWizardTasks('biological/physical')">
        <ion-label *ngIf="task.frequency==='oneTimeOnly'">{{task.name}}</ion-label>
        <ion-label *ngIf="task.frequency==='everyDay'">{{task.name}} every day</ion-label>
        <ion-label *ngIf="task.frequency==='daysOfWeek'">{{task.name}} every {{task.additional}}</ion-label>
        <ion-label *ngIf="task.frequency==='specificDate'">{{task.name}} on {{task.additional}}</ion-label>
    </ion-item>
</ion-item-group>

Collectives™ on Stack Overflow

Use multiple ngFor for same array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related