2017-05-18 1 views
1

J'essaie de coder un afficheur de calendrier très simple pour mon application ionique (il est essentiellement juste angulaire). Je stocke des informations pour chaque date dans un tableau displayedCal.
Il y a des bogues quand j'essaye de faire une nouvelle ligne pour chaque semaine en utilisant *ngIf="(i%7)==0": cela me donne une erreur d'analyse. Quelle serait la bonne façon de faire cela?Modulo renvoie un modèle d'analyse des erreurs

<template ngFor let-d [ngForOf]="displayedCal" let-i="index"> 
    <ion-row *ngIf="(i%7)==0"> 
     <ion-col (click)="...">{{d.displayedDate}}</ion-col> 
    </ion-row *ngIf="(i%7)==0"> 
    </template> 


Note aux developpeurs non ioniques <ion-row> et <ion-col> sont à peu près comme une structure <tr>/<td> ...



NB: Si je supprime juste le ngIf mon code est en fait travail.

+0

Est-ce que cela fonctionne sans les parenthèses? – Joe

+0

'ngIf' s'applique à l'ensemble du bloc, pas seulement à votre ligne de code. le ngIf final n'a pas de sens ici. À quoi ressemble le contenu de displayedCal? –

+0

Essayez avec '* ngIf =" (index% 7) == 0 "'. Dites-moi si cela marche pour vous. – SrAxi

Répondre

0

ngIf s'applique au bloc entier, pas seulement à votre ligne de code. Mais même si cela fonctionne, cela n'a toujours pas de sens pour votre objectif.

Vous pouvez changer votre tableau displayedCal à un tableau multidimensionnel sous cette forme: displayedCal[week][day] puis faire une boucle imbriquée:

<template *ngFor="let week of displayedCal"> 
    <ion-row *ngFor"let day of week"> 
    <ion-col (click)="...">{{day.whatever}}</ion-col> 
    </ion-row> 
</template> 

Cependant la date et l'heure est une question délicate. Vous devriez considérer votre modèle de données avec soin.

0

Je ne voulais pas faire une structure [week][day] car cela casse un peu le flux de travail de mes autres fonctionnalités. Quoi qu'il en soit, car il ne fonctionne pas comme je le voulais, je finalement adopté votre modèle et voici ce que je suis venu avec:

<template ngFor let-week [ngForOf]="displayedCal" let-i="index"> 
    <ion-row> 
     <ion-col *ngFor="let day of week" (click)="...">{{day.displayedDate}}</ion-col> 
    </ion-row> 
    </template> 

Merci beaucoup pour votre aide! :)

+0

Salutations :) Un bon modèle de données vous fera économiser des tonnes de temps dans le développement futur –