Nativescript 3 + angular 2：リストビューまたは絶対レイアウトマージンが有効にならない

Question

ご覧のとおり、 'marginBottom'などのプロパティを追加しようとしましたが、これらの効果はありません。私は、リスト内の項目の間にさらにスペースが必要です。これをやり遂げるのはどうすればベストだろうか？

<ListView [items]="data" class="small-spacing"> 
    <ng-template let-item="item" class="small-spacing" marginBottom="20"> 
     <AbsoluteLayout width="90%" height="110" margin="10" marginBottom="20" backgroundColor="lightblue" class="card" (tap)="navigateToItem(item._id)"> 
      <Image [src]="item.thumbnail" left="10" top="10" width="70" height="90"></Image> 
      <Label [text]="item.title" left="90" top="10" width="60%" height="20" ></Label> 
      <Label [text]="item.subtitle" left="90" top="30" width="60%" height="20" textWrap="true" ></Label> 
      <Label [text]="item.date" left="90" top="50" width="60%" height="70" class="small-text"></Label> 
     </AbsoluteLayout> 
    </ng-template> 
</ListView> 

Answer 1

は、私が見つけた解決策はng-template内stackLayoutを使用することでした。 marginBottomとmarginTopプロパティは、StackLayout内の要素を正しく配置します。

<ListView [items]="data" class="small-spacing"> 
    <ng-template let-item="item" class="small-spacing" style="margin-bottom: 20;"> 
     <StackLayout class="itemTemplateStackLayout" orientation="vertical"> 
      <AbsoluteLayout width="90%" height="110" margin="10" marginBottom="20" marginTop="20" backgroundColor="lightblue" class="card" (tap)="navigateToItem(item._id)"> 
       <Image [src]="item.thumbnail" left="10" top="10" width="70" height="90"></Image> 
       <Label [text]="item.title" left="90" top="10" width="60%" height="20" ></Label> 
       <Label [text]="item.subtitle" left="90" top="30" width="60%" height="20" textWrap="true" ></Label> 
       <Label [text]="item.date" left="90" top="50" width="60%" height="70" class="small-text"></Label> 
      </AbsoluteLayout> 
     </StackLayout> 
    </ng-template> 
</ListView>