我忙于一个非常基本的Angular2 / Nativescript应用程序，并试图在列表视图模板内的网格布局中显示产品列表...出于某种原因，当我测试这个标签时，标签会堆叠在彼此的顶部，就像它是一个Verticle堆栈视图而不是网格视图...任何想法我做错了什么？这甚至可能吗？关于使用Angular2 / Nativescript的网格布局，网上似乎没有太多内容......我在javascript中看到grod布局必须从ui / layouts导入？我没有这样做，但我不是试图改变控制器的布局，所以不认为有必要 .

我的代码：

product.component.html:

<ListView class="list-group" [items]="products">
<template let-item="product">
<StackView class="hr-dark"></StackView>
<GridLayout columns = "auto, auto, auto, auto" rows="auto, auto"  class="list-group-item">
<Label col="0" row="0" class="list-group-item-heading" text="Description"></Label>
<Label col="0" row="1" class="list-group-item-text" [text]="product?.Description"></Label>

<Label col="1" row="0" class="list-group-item-heading" text="POS Description"></Label>
<Label col="1" row="1" class="list-group-item-text" [text]="product?.POSDescription"></Label>

<Label col="2" row="0" class="list-group-item-heading" text="POS price"></Label>
<Label col="2" row="1" class="list-group-item-text" [text]="'R' + product?.POSPrice"></Label>

<Label col="3" row="0" class="list-group-item-heading" text="Stock On Hand"></Label>
<Label col="3" row="1" class="list-group-item-text" [text]="product?.StockOnHand"></Label>
</GridView>

</template>
</ListView>

check barcodes.component.html:

<StackLayout class="page">
  <Label class="h1 title m-x-auto" text="Check Barcodes"></Label>
  <Label class="body m-l-5" text="Scan Or Enter a barcode"></Label>
  <StackLayout class="form">    
    <StackLayout class="input-field">               
        <TextField class="input input-border" hint="Enter barcode" keyboardType="number" [(ngModel)]="textBarcode"></TextField>
    </StackLayout>
    <Button class="btn btn-primary m-x-5" *ngIf="textBarcode" text="Submit" (tap)="submitTextBarcode()"></Button> 
  </StackLayout>
  <Button class="btn btn-primary m-x-5" text="Scan" (tap)="scan()"></Button>

    //this is where I am trying to add the gridLayout (from the productComponent)...
    <product *ngIf="product"></product>
</StackLayout>
angular nativescript angular2-nativescript