0

首先，我的代码正在运行。这个问题是关于我是否在做正确的事情以及我是否正在使用 angular 2 的力量。我来自 angular 1，并且仍在学习 angular 2 核心概念。

开始吧：

给定一个 Angular 2 应用程序（RC.4），我有一个日历组件，它将日历呈现为视图。每个日历日都被“装饰”为红色（忙碌）或绿色（空闲），具体取决于 API 休息调用的结果。如果给定日期没有数据，则根本不会装饰这一天。

所以，我在日历的@component 中有以下 Observable。一旦它被解析，组件“条目”的属性就会被响应填充。（响应是属性“dayStatus”设置为忙/绿色的天对象数组）。

 ngOnInit() {
        this.calendarService.getAll().subscribe(
            response => {
                this.entries = response.json();
            }
        );
    }

日历模板有一个解析为 decorateDay() 处理程序的 ngClass：

<span class="day" *ngFor="let day of week.days"
      [ngClass]="decorateDay(day)">
        {{ day.number }}
</span>

因此，每个“日”都以声明的方式查看是否应该通过处理程序 decorateDay(day) 将其装饰为绿色或红色。它的工作原理如下：“day”作为参数传递，并用作从 JSON 数组中检索相关对象的键。从对象属性中，字符串 green / red 被传递给视图，并由 CSS 使用 ngClass 进行修饰。

  decorateDay(day) {

       let dayFormatted = day.date.format("YYYY-MM-DD");

       //when observable was resolved entries is not undefined.
       if (typeof this.entries !== 'undefined') {
           let data = this.entries[dayFormatted];
           if (typeof data !== 'undefined') {
               return data.dayStatus;
           }
       }
   }

我的问题来了：我不知道什么时候会定义“条目”，所以如果未定义，我会检查处理程序。看起来当条目被填充时，组件再次神奇地重新检查处理程序（通过更改检测）。我对此表示满意，但是没有更好的方法来检查组件的属性何时发生更改？也许用@resolved 或使用生命周期钩子装饰属性..？我不喜欢我这样做的方式！

希望大家能给点指点。提前致谢！

PS：与模型属性的绑定可以在模板本身上完成，但我想使用一个处理程序，因为它让我在未来如何装饰给定的日子方面有更大的灵活性。

4

1 回答 1

-1

我可能会误解你的问题，但在我看来这就是你要找的。

ngOnInit() {
    this.calendarService.getAll().subscribe(
        response => {
            this.entries = response.json();
            // >>> here you know that `entries` was updated
            // just invoke what you want to be executed when `entries` has changed
        }
    );
}
于 2016-07-07T10:25:13.393 回答