7
votes

Nativecript ListView affichant un seul article

i ma suive d'un cours sur pluralsight et j'ai rencontré un problème étrange. Ma vue de liste ne montre que le premier élément et rien d'autre. Ceci est étrange et j'ai utilisé des vues de la liste sans problème avant, donc je ne sais pas où l'erreur provient de.

mise en page: p>

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
    });
}


1 commentaires

Peut-être que le problème a été causé dû au fait que pour le second gridlayout le premier argument de ses lignes La propriété est automatique et ne affichera pas le listview correctement. Vous devez le changer en * , par exemple ou pour spécifier la hauteur de listeView >. Vous devez également spécifier le pour la liste de liste.


3 Réponses :


13
votes

Qu'est-ce qui se passe vraiment dans votre code est que vous créez une grille avec deux lignes, puis la vue de votre liste par défaut est placée dans la première ligne avec le paramètre "Auto". Ce paramètre vous donnera de l'espace uniquement aussi grand qu'un espace de modèle d'élément - en fait, tous vos articles sont chargés et peuvent être défilés, mais il existe un endroit pour visualiser un seul d'entre eux.

Modifiez la auto à * ou retirez la disposition de la grille imbriquée. Juste pour vous assurer que vous contrôlez quel élément est indiqué à l'endroit exact, je recommanderais également de toujours déclarer vos positions dans la grille avec Row = "Col =" Même quand il y a une architecture assez simple.

Exemple: xxx


2 commentaires

Merci. Quelque temps après avoir soumis ces questions, j'ai réalisé qu'ils étaient tous chargés mais je ne pouvais toujours pas comprendre comment les placer correctement. Je pense que je comprends maintenant.


Pour que quiconque voie soit juste un élément malgré une mise en page appropriée, ne faites pas confiance à la documentation sur docs.nativescript.org/angular/ui/ng-u-widgets/.../a> Vous devez toujours utiliser pour boucler les éléments



2
votes

J'ai eu le même problème. J'ai également remarqué que la ligne d'une ligne sur Android dans le listview fait défiler. J'ai ajouté de la hauteur au listview et tout a fonctionné bien. xxx


0 commentaires

0
votes

Ajout à la réponse de Nick Iliev sur la hauteur de la liste, j'ai pu rendre la hauteur de la liste de la liste de manière dynamique à la taille de ses éléments en multipliant la hauteur d'un élément de la longueur de la liste, comme vous.

<ScrollView height="{{ notes, notes.length*90 }}">
  <ListView class="list-group" items="{{ notes }}" height="100%">
    <ListView.itemTemplate>
      <StackLayout class="m-b-2 m-x-2">
            <Label class="h3 far p-l-15 text-gray m-b-1" text="{{user.username}}" />
           <TextField class="h3 input-border-rounded input-border-disabled p-y-5" 
                      text="{{ note }}" editable="false" />
      </StackLayout>
    </ListView.itemTemplate>
  </ListView>
</ScrollView>


0 commentaires