Question

我正在尝试为我的离子应用程序编写一个非常简单的日历显示器（它基本上只是Angular）。我正在为数组displayedCal中的每个日期存储信息。
当我尝试使用*ngIf="(i%7)==0"为每周创建一个新行时，它会出错：这会给我一个解析错误。这样做的正确方法是什么？

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

非离子开发人员注意<ion-row>和<ion-col>非常类似于<tr>/<td>结构......

N.B。：如果我只删除ngIf，我的代码实际上正在运行。

Answer 1

ngIf适用于整个块，而不仅仅是您的代码行。但即使这样可行，它对你的目的仍然没有意义。

您可以使用以下格式将displayedCal数组更改为多维数组：displayedCal[week][day]然后进行嵌套循环：

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

然而，日期和时间是一个微妙的问题。您应该仔细考虑您的数据模型。

Answer 2

我不想做[week][day]结构，因为它打破了我的其他功能工作流程。无论如何，因为它没有按照我的要求工作，我终于采用了你的模式，这就是我提出的：

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

非常感谢你的帮助！：）

Modulo返回模板解析错误

2 个答案: