2017-04-09 14 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でなければならず、次にmonthLengthに達するまで1などで増加します。ですから、どうすればこの実装を行うことができますか?あなたはそれをまったくテンプレート側を行うことはできません

+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; 
    } 
} 
関連する問題