如何使用 ngFor 循环将 StackLayout 制作成可滚动列表？答案

【问题标题】：How can I make a StackLayout with ngFor loop into scrollable list?如何使用 ngFor 循环将 StackLayout 制作成可滚动列表？
【发布时间】：2017-06-11 23:04:45
【问题描述】：

 <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 包裹它，没有用。

我也无法让(items$ | async) 与ListView 一起使用，似乎ngFor 无法与ListView 一起使用，我们需要ng-template 来获取ListView。

我尝试了以下但只有第一项正在渲染

<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>

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

首先用StackLayout 包装整个代码，然后用ScrollView 工作

<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>

【讨论】：