2017-04-09 56 views
0

我正在尝试构建自定义日历。还有很多事情要做,但我在这方面的问题是如何在Angular2组件中的HTML模板中实现一个计数器。更具体地:在Angular2组件的HTML模板中实现计数器

<div class="container"> 
    <table class="table table-bordered"> 
    <tbody> 
     <tr *ngFor="let w of weeks"> 
      <td *ngFor="let d of days"> 
       <ng-container *ngIf="(day_count <= monthLength && (w > 1 || d >= firstDayOfMonth))"> 
        {{ day_count }} 
        // On this point, I want "day_count = day_count + 1"... 
       </ng-container> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</div> 

关于上述变量:

weeks = [1,2,3,4,5,6]; 
days = [0,1,2,3,4,5,6]; 
monthLength = 28 or 29 or 30 or 31 
firstDayOfMonth = from 0 to 6 

变量“DAY_COUNT”是变量负责显示该月的每个日期。最初,它必须是1,然后增加1等,直到达到monthLength。那么,我怎样才能使这个实现?

+0

你不能只用另一个'ngFor'循环吗? – jonrsharpe

回答

0

你不能这样做没有模板侧,

但我认为你需要为你的代码的解决方案是:

模板侧:

<div class="container"> 
    <table class="table table-bordered"> 
    <tbody> 
     <tr *ngFor="let w of weeks"> 
      <td *ngFor="let d of days"> 
       <ng-container *ngIf="incr(w,d,monthLength,firstDayOfMonth)"> 
        {{ incr(w,d,monthLength,firstDayOfMonth) }} 
       </ng-container> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</div> 

元件面:

weeks = [1,2,3,4,5,6]; 
days = [0,1,2,3,4,5,6]; 
firstDayOfMonth = 0; 
monthLength = 31; 

incr(w,d,monthLength,firstDayOfMonth) 
{ 
    let day_count = ((w-1)*7)+d; 
    if (day_count < (monthLength+firstDayOfMonth) && day_count >= firstDayOfMonth) 
    { 
     return day_count - firstDayOfMonth+1; 
    } 
}