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

Question

我想使用 [ngClass] 方法调用 returns 像 {currentWeek: true} 这样的对象，我想添加可以具有值 week.state 的 var week.state =14=].

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

您可以使用方法和变量为 ngClass 构造 classes 字符串。

例如在这里看到一个 class 提供一个方法和一个对象变量提供 class 信息：

class { 

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

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

在模板中，您可以使用方法和变量为 ngClass 构造 classes 字符串。

   <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

Answer 2

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

你至少应该缓存结果

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)] 导致包含字符串和对象的列表不受支持。

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

Array in NgClass with method call and variable

ng-class

angular