Nativescript ListView只显示一个项目

Question

我跟随一个关于复数的课程,我遇到了一个奇怪的问题.我的列表视图仅显示第一个元素而不显示任何其他元素.这是奇怪的,我之前使用列表视图没有问题所以我不知道错误来自哪里.

布局:

    <Page xmlns="http://schemas.nativescript.org/tns.xsd"
 loaded="pageLoaded">
  <GridLayout rows="auto, *">
    <!-- Header -->
    <StackLayout cssClass="page-header">
      <Label text="Header" cssClass="page-title bold" horizontalAlignment="center" margin="15"/>
    </StackLayout>

    <!-- Sessions Views -->
    <GridLayout rows="auto, *" row="1"> 

      <ListView items="{{ sessions }}">
        <ListView.itemTemplate>
          <Label text="{{ title }}"/>
        </ListView.itemTemplate>
      </ListView>

    </GridLayout>
  </GridLayout>
</Page>

打字稿:

import { EventData, Observable } from "data/observable";
import { Page } from "ui/page";

var page: Page;
var tempSessions = [
    {
        id: '0',
        title: "Stuff"
    },
    {
        id: '1',
        title: "Stuffly"
    },
    {
        id: '2',
        title: "Stufferrs"
    },
    {
        id: '3',
        title: "Event 4"
    }
];
export function pageLoaded(args: EventData){
    console.log(JSON.stringify(tempSessions));
    page = <Page>args.object;
    page.bindingContext = new Observable({
        sessions: tempSessions
    });
}

我怀疑第一个列表项是完全填充gridLayout但是在它周围放置一个边框显示它不是.

Answer 1

您的代码中实际发生的是您正在创建一个包含两行的网格,然后默认情况下您的列表视图将放在设置为"auto"的第一行中.此设置将为您提供仅与一个项目模板空间一样大的空间 - 事实上,您的所有项目都已加载并可以滚动,但有一个地方只能显示其中一个.

将auto更改为*或删除嵌套的网格布局.为了确保您能够控制哪个元素显示在确切的位置,我建议您也始终使用row ="col ="在网格中声明您的位置,即使有一个非常简单的架构.

例:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
    <!-- Header -->
    <StackLayout row="0" cssClass="page-header">
      <Label text="Header" cssClass="page-title bold" horizontalAlignment="center" margin="15"/>
    </StackLayout>

    <!-- Sessions Views -->
    <ListView row="1" items="{{ sessions }}">
      <ListView.itemTemplate>
        <Label text="{{ title }}"/>
      </ListView.itemTemplate>
    </ListView>

  </GridLayout>
</Page>