Angular 2 ngClass 在检查条件时不评估我的表达式

Question

我在 Angular 2 中有一个名为 selectedState 的表达式。该表达式的计算结果为 const 内部的五个属性之一。根据单击的内容，它会更改 class 名称。

                    <button
                        class="button button--secondary"
                        [ngClass]="selectedState">
                        <div class="u-maxX u-centerX">
                            <span>Button</span>
                            </div>
                        </div>
                    </button>

"selectedState" 将 return 单击哪个项目； default、is-hovering、is-active、disabled 和 loading。

例如如果我点击悬停，它将 return

                    `<button
                        class="button button--secondary is-hovering">
                        <div class="u-maxX u-centerX">
                            <span>Button</span>
                            </div>
                        </div>
                    </button>`

现在当我像这样更改语法时。

                    <button
                        class="button button--primary"
                        [ngClass]="{selectedState: type === 'primary'}">
                        <div class="u-maxX u-centerX">
                            <span>Button</span>

                        </div>
                    </button>

现在 "selectedState" 计算字符串 "selectedState" 而不是像以前那样动态变化。如何在检查类型 === 'primary' 时保持动态行为？我需要检查类型，因为页面上有几种类型。我需要每种类型只影响一个按钮，否则它会影响页面上的所有按钮。

Answer 1

您应该在模板中保留尽可能多的逻辑，因此要么绑定 [ngClass]="someVariable" 并通过调用函数改变该变量，要么绑定 [ngClass]="someFunction()" 并拥有该函数 return基于某些条件的适当 class 名称。

例如，有一个按钮调用了setIsHovering函数，另一个按钮调用了setIsActive函数等，然后定义这些函数：

setIsActive() {
    this.selectedState = "isActive";
}

setIsHovering() {
    this.selectedState = "isHovering";
}

并将 ngClass 定义为：

[ngClass]="selectedState"

或者，定义一个 selectedState 函数：

selectedState() {
    if(this.isHoveringStateVariable == true) {
         this.selectedState = "isHovering";
    } else if (this.isActiveStateVariable == true) {
          this.selectedState = "isActive";
    }
}

并将 ngClass 定义为：

[ngClass]="selectedState()"

显然用任何适合确定实际当前状态的逻辑替换 this.isHoveringStateVariable。

Angular 2 ngClass 在检查条件时不评估我的表达式

Angular 2 ngClass not evaluating my expression when checking against condition

expression

angular2-directives

angular