angular - NgClass 中的数组，带有方法调用和变量

Question

我想使用 [ngClass]使用返回对象的方法调用 {currentWeek: true}我想添加 var week.state可以具有值 rejected .

我希望 HTML 看起来像这样:<div class="currentWeek rejected"></div>但是当我使用它时，我得到了这个错误:

Error in ./FlexCalendar class FlexCalendar - inline template:29:13 caused by: NgClass can only toggle CSS classes expressed as strings, got [object Object]

如何将方法调用和变量组合到 ngClass 中？类似于 [ngClass]=[setWeekClasses(week), week.state]

setWeekClasses(week: Week): Object {
    let state: string = this.state(week.state);
    return {
        'currentWeek': week.weekNumber === this.selectedDate.getWeekNumber(),
        [week.state]: true,
    };
}

Answer 1

不鼓励绑定(bind)到方法或函数，返回一个新的对象实例尤其糟糕。

你至少应该缓存结果

oldWeek;
oldStyles;
setWeekClasses(week: Week): Object {
    if(this.oldWeek != week) {
      let state: string = this.state(week.state);
      this.oldStyles = {
        'currentWeek': week.weekNumber === this.selectedDate.getWeekNumber(),
        [week.state]: true,
      };
      this.oldWeek = week;
    }

    return this.oldStyles;
}

然后你就可以像这样使用了

[ngClass]="setWeekClasses(week)"

这个绑定(bind)

[ngClass]=[week.state, getWeekState(week)]

无效，因为 ngClass 支持字符串、字符串列表和具有字符串值的对象，而 [week.state, getWeekState(week)] 生成列表包含一个字符串和一个对象，这是不受支持的。