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

Question

我想将[ngClass] 与返回类似{currentWeek: true} 的对象的方法调用一起使用，并且我想添加可以具有值rejected 的var week.state。

我希望 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

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

你至少应该缓存结果

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)"

这个绑定

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

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

Answer 2

您可以使用方法和变量来构造 ngClass 的类字符串。

例如，这里有一个提供方法的类和一个提供类信息的对象变量：

class { 

   getCSSClass() {
     return  { state: "rejected" }
   }

 week:object = {
    state: 'rejected'
  }
}

在模板中，你可以使用方法和变量来构造 ngClass 的类字符串。

   <div [ngClass]="getCSSClass().state + ' currentWeek'">">
      <h2>Hello {{name}}</h2>
   </div>

或者你可以写：

@Component({
  selector: 'my-app',
  template: `
    <div [ngClass]="week.state + ' ' + getCSSClass().state">
      <h2>Hello {{name}}</h2>
    </div>
  `,
})

在 plunker 中查看：http://plnkr.co/edit/JfN5cjbCjNAUs8qx9oh1