ngIf inside a ngFor

Ionic Framework ionic-v3
#1

Hello everyone !
Let me explain you quickly i have this:

<ion-col *ngFor='let item of firstrow' width-25>
  <page-rasp class="center"></page-rasp>
</ion-col>

And now i have more than one component, and inside the TypeScript file i implement a factory pattern to call the great component, so i want to use ngIf to make something like:

<ion-col *ngFor='let item of firstrow' width-25>
        <div *ngIf='factory == 0'>
          <page-rasp class="center"></page-rasp>
        </div>
        <div *ngIf='factory == 1'>
          <page-rasp2 class="center"></page-rasp2>
        </div>
      </ion-col>

factory is the integer i use to make my pattern factory!

Have you some idea or advice ?

#2

try this.

<ion-col *ngFor='let item of firstrow' width-25>
         <ng-container *ngIf='factory === 0'>
           <page-rasp class="center"></page-rasp>
         </ng-container>
         <ng-container *ngIf='factory === 1'>
           <page-rasp2 class="center"></page-rasp2>
         </ng-container>
</ion-col>
#3

It’s really interesting, that works but not really correctly ! that’s mean i had the first component with the factory = 1, and when i had the second one with the factory = 2 it replace the first one with the second, so i have two components from the second factory

#4

may be i need to have a second array where i inject the factory

first array [1][2][3][4][5]
second array [page1][page2][page3][page4][page5]

and make a for on those two arrays ?

#5

the second array it has page-rasp, page-rasp2, page-rasp3… ?

Anyway, you have to do a *ngIf :joy: :joy: :joy:

#6

yeah but if i stock the factory, it do the for on the different value of the factory, because now it do it on the current value of the factory .

Do you understand what i mean ?

instead of 1/2/3, it do 1/1/1 2/2/2

#7

The factory number are inside typescript file of components page-rasp and page-rasp2 ?

I’m not understanding perfectly :thinking:

#8

The factory number is inside viewer.ts and allow to call page-rasp or page-rasp2 as factory pattern

#9

Currently it replace the page call with the factory 1 with the page call with the factory 2 and add an other page correctly.
Just i need to keep the first page and add an other one with the new factory not replace the previous one…

Did you suggest to have the factory number inside each page-rasp, so page-rasp have 1, and page-rasp2 have 2, and inside the ngFor i have something like item.factory ===1 ??

#10

OK !
So i try the thing i think you suggest to do ! :smiley:
So i put the number factory = 1 inside page-rasp and factory = 2 inside page-rasp2
Then i update the code:

<ion-col *ngFor='let item of firstrow' width-25>
        <ng-container *ngIf='item.factory === 1'>
          1
          <page-rasp class="center"></page-rasp>
        </ng-container>
        continue
        <ng-container *ngIf='item.factory ===2'>
          2
          <page-rasp2 class="center"></page-rasp2>
        </ng-container>

      </ion-col>

if i try this, it only call the factory 1 and don’t do the second and ngif.
And if i delete “.factory === 2”, i have the two differents pages it’s ok, but how i can do if i want an other page again. May be i missed something with the ngIf

It just done the first if but not the others …

#11

in my case, I found solution at this post on stackoverflow

basically:

*ngFor and *ngIf cannot be used together on the same element.

What you can do is use an ng-container.

<ng-container> is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node.

<ng-container> is rendered as an HTML comment.

<ion-select [(ngModel)]="task">
    <ng-container *ngFor="let task of tasks">
        <ion-option [value]="task" *ngIf="task.ProjectId == project.Id">{{task.Title}}</ion-option>
    </ng-container>
</ion-select>