如何在Nativescript Angular中每行显示2张卡片

时间:2019-12-11 09:47:32

标签: angular nativescript-angular

我在Nativescript Angular中创建了一个Gridview组件,我希望每行显示2张卡片。我当前的代码向我显示了所有卡的垂直列表(每行显示1张卡)。如何每行显示2张卡?有人可以帮我吗?

这是我的gridview.component.html:

 <ScrollView >       
    <StackLayout>       
    <CardView class="card" *ngFor="let item of items" shadowRadius="3"  elevation="40" radius="10" >
        <StackLayout class="card-layout" >
        <GridLayout columns="auto, *, auto" rows="auto, *,*,*,*,*,*" class="color">

            <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"  textWrap="true" col="1" colSpan="2" class="minheight fontsize1 margin va-bottom" horizontalAlignment="left"></Label>

            <Label [text]="item.rbetrag" textWrap="true"  col="2" class="minheight fontsize1 margin va-bottom" horizontalAlignment="right"></Label>

            <Label text="Rechnungsnummer:" textWrap="true" col="1" row="0" class="textalign fontsize3 margin va-bottom" horizontalAlignment="left"></Label>
            <Label [text]="item.id" textWrap="true" col="1" row="1" class="textalign fontsize2 margin va-bottom" horizontalAlignment="left"></Label>

            <Label text="Rechnungsdatum:" textWrap="true" col="1" row="3" class="textalign fontsize3 margin va-bottom" horizontalAlignment="left"></Label>
            <Label [text]="item.rd" textWrap="true" col="1" row="4" class="textalign fontsize2 margin va-top" horizontalAlignment="left"></Label>

            <Label text="Fälligkeitsdatum:" textWrap="true" col="2" row="3" class="textalign fontsize3 margin va-bottom" horizontalAlignment="center"></Label>
            <Label [text]="item.fd" textWrap="true" col="2" row="4" class=" fd textalign fontsize2 margin va-top" horizontalAlignment="center"></Label>
        </GridLayout>
        </StackLayout>
    </CardView>
    </StackLayout>
</ScrollView> 

0 个答案:

没有答案