Question

我希望[ngClass]使用方法调用返回类似{currentWeek: true}的对象，并且我想添加值week.state的var rejected。< / p>

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

例如，请参阅此处提供一个提供类信息的方法和对象变量的类：

class { 

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

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

在模板中，您可以使用方法和变量来构造ngClass的classes-string。

   <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

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

您至少应该缓存结果

[ngClass]="setWeekClasses(week)"

然后你可以像

一样使用它

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

此绑定

ngClass

无效，因为[week.state, getWeekState(week)]支持字符串，字符串列表和带字符串值的对象，而DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss"); Date date = new Date(); request.setAttribute("date", dateFormat.format(date));导致包含字符串和对象的列表不受支持。

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

2 个答案: