NativeScript отображает изображения в динамической сетке

Question

Я пытаюсь найти способ отображения 6 изображений в двух столбцах и 3 рядах. С для столбцов и изображений должно быть 50%. Вот мой код, и он не «переполняет» второй и третий ряд.

<Repeater items="{{ sviKatalozi }}">
        <Repeater.itemsLayout>
            <StackLayout orientation="horizontal" width="500" height="1000" />
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
            <Image width="180" margin="10" src="{{ 'http://imageurl' + katalog_image }}" />
        </Repeater.itemTemplate>
</Repeater>

Я нашел идеальное решение <FlexboxLayout>, чтобы организовать вещи так, как я хочу, но не смог найти способ использовать наблюдаемые и привязку данных. Не работает, если положить items="{{ sviKatalozi }}" внутрь.

<FlexboxLayout flexWrap="wrap" height="50%" width="100%" backgroundColor="lightgray">
<Label text="Label 1" width="50%" height="50" backgroundColor="red"/>
<Label text="Label 2" width="50%" height="50" backgroundColor="green"/>
<Label text="Label 3" width="50%" height="50" backgroundColor="blue"/>
<Label text="Label 4" width="100" height="50" backgroundColor="yellow"/>
</FlexboxLayout>  

Есть ли способ заставить эту работу? Спасибо

Answer 1

используйте ngFor вот так

<GridLayout *ngFor="let item of placesArray" width="50%" class="placeBox">

вместо повторителя