Question

我正在使用Angular2构建一个简单的日历。使用此代码完成所有工作正常（并按预期）：

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Calendar }  from '@npm/calendar';

export class CalendarWeek {
  days: Array<any>;
  data?: string; // reserved for further use
}

@Component({
 selector: 'my-app',
 templateUrl: 'app/app.component.html',
 styleUrls: ['app/app.component.css']
})

export class AppComponent implements OnInit { 

  title = 'Calendar';
  weeks:CalendarWeek[];

  months:string[] = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
 ];

 weekDays:string[] = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday'
  ];

 monthString:string;
 month:number;
 year:number;

 prevMonth:Boolean;
 nextMonth:Boolean;
 thisMonth:Boolean;
 showMonth:Boolean;

 getWeeks(): void {

   let cal = new Calendar(1); // start with Monday
   let mdc = cal.monthDates(this.year, this.month);

   this.weeks = [];
   this.monthString = this.months[this.month];
   this.prevMonth = this.nextMonth = this.thisMonth = false;

   for (let i=0; i<mdc.length; i++) {
     this.weeks.push({ days: mdc[i] });
   }
 }

 getThisMonth(): void {
   this.month = new Date().getMonth();
   this.year = new Date().getFullYear();
   this.getWeeks();
 }

 getPreviousMonth(): void {
   this.getMonth(-1);
 }

 getNextMonth(): void {
  this.getMonth(+1);
 }

 getMonth(direction): void {
   if ( this.month == 11 && direction > 0 ) {
     this.year++;
     this.month = 0;

   } else if (this.month == 0 && direction < 0) {
    this.year--;
    this.month = 11;

   } else {
    this.month = this.month + direction;
   }

   this.getWeeks();
 }

 ngOnInit(): void {
   this.getThisMonth();
 }
}

app.component.html

<h1>{{title}}</h1>

<div class="period">
  <a (click)="getPreviousMonth()" class="monthPager">&lt;</a>
  <a (click)="getThisMonth()" class="monthPager">now</a>
  <a (click)="getNextMonth()" class="monthPager">&gt;</a>
  <span class="now">{{monthString}}, {{year}}</span>
</div>

<div class="week">
  <div *ngFor="let day of weekDays" class="week-day">
    <span>{{day}}</span>
  </div>
</div>

<div *ngFor="let week of weeks" class="week">
  <div *ngFor="let day of week.days" class="day"> 
    <span class="day-date">{{day | date:'d'}}</span>
  </div>
</div>

正如我所说，一切正常，我可以来回浏览几个月。 npm/calendar模块为每月的每个星期（星期一到星期日）提供一个简单的日期对象数组。问题是，第一周和最后一周还可以包括上个月或下个月的日期，因此我想检查这些情况并显示月份的名称，一次。所以我会October 31, November 1, 2, 3, [...], 30, December 1, 2, 3, 4。

要执行此操作，我在 app.component.html 中添加了一行，所以它看起来像这样：

<div *ngFor="let week of weeks" class="week">
    <div *ngFor="let day of week.days" class="day">
        <span *ngIf="checkMonth(day)" class="day-month">{{day | date:'MMM'}}</span>
        <span class="day-date">{{day | date:'d'}}</span>
    </div>
</div>

和app.component.ts的这个方法：

  checkMonth(day): Boolean {

    let mo = day.getMonth();
    this.showMonth = false;

    if  ( mo < this.month && !this.prevMonth) {
      this.prevMonth = true;
      this.showMonth = true;
    }

    if ( mo > this.month && !this.nextMonth) {
      this.nextMonth = true;
      this.showMonth = true;
    }

    if ( mo == this.month && !this.thisMonth) {
      this.thisMonth = true;
      this.showMonth = true;
    }

    return this.showMonth;

  }

现在我有一次错误

Subscriber.ts:238 EXCEPTION: Error in app/app.component.html:17:14 caused by: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

我不能再翻阅几个月了。仍在评估点击次数并生成新阵列，但视图不会更新。哦，奇怪的是，checkMonth似乎按照预期评估了日期，它仍然没有显示月份的名称 - 我只是得到了纯粹的日期，没有月份名称。

这会导致什么问题？感谢。

UPD：这是Plunker：https://plnkr.co/edit/HrIlOG9fsGhIS3w12bV0?p=preview

Answer 1

我已经对你的plunkr进行了更新：https://plnkr.co/edit/TCVkfJUDvLH68ybFJXqA?p=preview

问题

您收到消息的原因是

您检查属性的值（例如this.thisMonth）
您更新所述属性的值，从而更改它。
开发模式下的Angular将每次检查两次，以帮助您过滤掉可能的错误。（在您的情况下，这会失败。由于您更新了类的属性，如果您运行checkMonth()函数两次，它将产生两个不同的结果，一个将是true，第二个将是{ {1}}因为您已经更新了运行检查的值。

为了避免后者，你应该更多地分离逻辑（尽管我认为你编写的代码非常有意义，并且应该可以用于生产，但这不是Angular2看待它的方式）。

因此，不是“来回”地检查和设置属性，而是可以编写一个返回相同值的函数，该函数仅基于输入参数。

可能的解决方案

false

这将花费您当前的几周，并检查每个月的第一次出现的情况。基于此，无论您运行此代码多少次，结果都将始终相同，因为它将独立于应用程序的其余部分或应用程序的状态运行。

Answer 2

将以下两行添加到main.ts：

import {enableProdMode} from '@angular/core';

enableProdMode();

如果Angular2未处于生产模式，它将检查每次更改检测两次.. 如果两个检查不同，则抛出此错误。

Angular2：在数据更改时查看更新，但不在ngif中查看

2 个答案:

问题

可能的解决方案