JavaScript 对象和 css 类给出问题

Question

我的问题与 Angular Material 有关，但 JavaScript 逻辑导致了我的问题。我有一个对象

 [  {
   "type": "holiday",
   "date": "2019-07-04",
   "releaseWindow":       {
      "start": null,
      "end": null
   },
   "description": "HMHS Holiday",
   "linkable": false
}]

如果日期类型为假日，则将红色应用于日历。
我为此使用了 switch 语句

// dateClass is used to apply color to calendar. If dates of calendar is matching with dates from sample data then color will be applicable
dateClass() {
  return (date: Date): MatCalendarCellCssClasses => {
    for (const items of this.datesArray) {
      switch (items.type) {

        case 'holiday':
          if (moment(items.date).year() === date.getFullYear() && moment(items.date).month() === date.getMonth() && moment(items.date).date() === date.getDate()) {
            this.holiday = true; /// apply red color
          } else {
            this.holiday = false; /// no color
          }
          break;
        default:
          break;
      }
    }
    return [this.holiday ? 'holiday' : ''];
  }; // if this.holiday is true then apply red color to background

}

下面是我的stackblitz链接。
https://stackblitz.com/edit/ang-c-p-5htnub?file=app%2Fapp.component.ts

如果您从样本数据中提取单个对象，那么您将看到颜色适用。但是当你获取大量数据时，它就不适用了。

例如对于日期“2019-07-04”，在日历背景中应该是红色但不是。如果您从示例数据中删除所有内容并仅获取第一个对象(日期:“2019-07-04”)，则 css 类适用。

Answer 1

我相信您已经使您拥有的方法过于复杂。
这是一个简化的示例:
https://stackblitz.com/edit/ang-c-p-5fbu1h?file=app%2Fapp.component.ts

  dateClass() {
    // This actually gets called for **EACH** date that's being rendered.
    // Keep this in mind.
    return (calendarDate: Date): MatCalendarCellCssClasses => {
      const key = moment(calendarDate).format('YYYY-MM-DD');
      let date = null;
      if(this.datesArray) {
        const result = this.datesArray.filter((d: any) => d.date === key);
        if(result.length > 0) {
          date = result[0];
        }
      }

      let cssClasses = '';
      if(date) {
          cssClasses = date.type;
          if(date.linkable === true) {
              cssClasses += ' set_your_linkable_class';
          }
      }

      return cssClasses;
    };
  }

如果我是你，我也会重构数据或重构后端以在 map 中返回数据。格式这样你就可以直接做 this.datesArray['2019-07-12']并直接获取对象，而不必循环遍历所有日期以将其过滤掉。