Angular

Question

我正在尝试使用不同的条件切换两个 CSS classes:

  <div *ngFor="let year of years" [class.selectedYear]="year === selectedYear"
       [class.currentYear]="year === date.getFullYear()" (click)="onYearClick(year)">{{ year }} 
  </div>

不过我真的不确定这是否完全可行。在我的 onYearClick() 方法中，我引用了 DOM 元素，这些元素有 classes selectedYear 或 currentYear。这些 DOM 元素的 console.log returns 未定义，但是：

  @ViewChild('currentYear') currentYearDOM?: ElementRef;
  @ViewChild('selectedYear') selectedYearDOM?: ElementRef;

  onYearClick() {
    console.log(this.date.getFullYear());
    console.log(this.currentYearDOM);
    console.log(this.selectedYearDOM);

所以，我有两个问题：

是否可以使用上述模板符号切换多个 CSS class？
为什么这些对象未定义？具有相应 class 的 DOM 元素存在

=============================================

更新：我尝试在我的 div 中使用以下语句：

[ngClass]="{'selectedYear': year === selectedYear,'currentYear': year === date.getFullYear() }"

，但问题依旧。

我真的认为我切换这些 class 的方式有问题：

当我第一次打开视图时，包含当前年份的右侧 div 标记为 currentYear CSS class。然后，当我点击另一年，关闭视图并再次打开时，所选年份标记为 selectedYear CSS class，但当前年份已丢失 [=18] =] CSS class。为什么会这样？

另外：我的 ViewChild 组件的 console.log 总是打印 undefined。所以，我假设我尝试引用 DOM 元素的方式有问题。

============================================= ==========

另一个更新：

我发现了问题：currentYear 的条件是错误的。哇，这有点愚蠢。抱歉！

Answer 1

试试这个：

<div [ngClass]="{'class1': yourCondition1, 'class2': yourCondition2}"></div>

Angular - 是否可以在不同条件下切换多个 CSS class？

Angular - is it possible to toggle more than one CSS class on different conditions?