Component with ngfor use component with ngfor

Ionic Framework ionic-v3
1

Hello,
I try my best to explain.

I have a few componets. I call it red, green and blue.

I have a componets1 witch use this componets in an ngFor. ngIf decide if red, green or blue is inserted. list1:any = [] holds what I need in ngFor and ngIf. I can change dynamically list1 and this change my ngFor, This is working.

Now I will make a component2 with ngFor. ngFor iterates over list2 and insert component1 . Componet1 is inserted, but how I can give each componet1 a sepearte list of red, green and blue.

<div *ngFor='let item of list2'>
  
    <component1 list1={{item.comp}}></component1 >
    

  </div>

I have tried something like


      temp.push({ comp: [
        { component: 'red'' },
        { component: 'red' },
        { component: 'blue' },
       { component: 'green' }
      ]
    });
list2 = temp;

I get the error
Cannot find a differ supporting object ‘[object Object],[object Object],[object Object],[object Object],[object Object]’ of type ‘string’. NgFor only supports binding to Iterables such as Arrays.

So how I can achieve this?

I hope somebody understand, what I want. I want control from componet2 how many component1 are inserted and give each componet1 a array what is in componet1 insertted.

Thanks in advance, anna-liebt.