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

Question

我想使用[ngClass]一个方法调用来返回一个类似的对象，{currentWeek: true}并且我想添加week.state可以具有值的var 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

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

你至少应该缓存结果

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