2017-06-11 15 views
1
<StackLayout width="100%" *ngFor="let item of (videos$ | async)"> 
    <CardView class="studentCard" margin="2" elevation="10" radius="1"> 
     <GridLayout rows="auto, auto, auto" columns="auto, auto, *"> 
      <Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image> 
      <Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label> 
      <Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label> 
     </GridLayout> 
    </CardView> 
</StackLayout> 

ScrollViewでラップしようとしましたが動作しませんでした。ngForループでスクロール可能リストにStackLayoutを作成するにはどうすればよいですか?

私はどちらかListView(items$ | async)作品を作ることができなかった、ngForListViewでは動作しないことができ、我々はListViewためng-templateを必要とするようです。

Iは、以下を試みたが、唯一の最初の項目はScrollViewとその後StackLayoutを有する第1のコード全体をWraping

<ScrollView> 
    <ListView [items]="videos$ | async" class="list-group"> 
    <ng-template let-item="item"> 
     <GridLayout class="list-group-item"> 
     <Image [src]="item.snippet.thumbnails.high.url"></Image> 
     <Label [text]="item.snippet.channelTitle" ></Label> 
     <Label [text]="item.snippet.title">></Label> 
     </GridLayout> 
    </ng-template> 
    </ListView> 
</ScrollView> 

答えて

1

レンダリングされ

<ScrollView> 
    <StackLayout> 

    <StackLayout width="100%" *ngFor="let item of (videos$ | async)"> 
     <CardView class="studentCard" margin="2" elevation="10" radius="1"> 
      <GridLayout rows="auto, auto, auto" columns="auto, auto, *"> 
       <Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image> 
       <Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label> 
       <Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label> 
      </GridLayout> 
     </CardView> 
    </StackLayout> 

    </StackLayout> 
</ScrollView> 
働い
関連する問題