Angular 不更新基于 $index 的 ngclass答案

【问题标题】：Angular not updating ngclass based on $indexAngular 不更新基于 $index 的 ngclass
【发布时间】：2023-03-14 21:23:01
【问题描述】：

我有一个滑块（使用 angular-material），它与控制器作为变量 (avm.itemsIndex) 相关，该变量用于 ng-repeat 列表上的 ng-class。

所以 ng-repeat 中的每个项目都有：

ng-class="{ 
            active : avm.itemsIndex == $index, 
            selected : avm.selecting==item.name, 
            left : avm.itemsIndex == $index+1 ,
            left2 : avm.itemsIndex == $index+2,
            right : avm.itemsIndex == $index-1,
            right2 : avm.itemsIndex == $index-2
        }"

因此，任何两个项目都不应该有 .active，因为它们都将 $index 与 avm.itemsIndex 进行比较。任何项目也不应该同时具有 .active 和 .left、.left 2 等

问题是，如果我快速拖动滑块以使其快速连续更新 avm.itemsIndex，那么几个项目将具有 .active，有些可能具有 .active 和 .left、.left2 等。

似乎并非所有项目类都会在 avm.itemsIndex 更改时更新。

有谁知道我如何解决这个问题，甚至调试它？

【问题讨论】：

您必须发布更多代码，以便我们检查可能的原因。
真的没有更多可展示的了。正如我所说，变量 avm.itemsIndex 绑定到材质滑块。随着滑块的滑动，值会发生变化。该值正在正确更改。每次更改 avm.itemsIndex 时，似乎 ng-class 都不会更新所有项目上的类，特别是如果通过快速滑动滑块来快速连续更改。如果我在视图中转储 {{avm.itemsIndex}} 和 {{$index}} 它们是正确的。问题是 ng-class 没有更新重复中的所有项目类。

标签： javascript angularjs

【解决方案1】：

要调试，只需使用{{ avm.itemsIndex == $index+2 }} 转储值，我经常使用控制器作为语法。您是否尝试过将avm.itemsIndex 设为函数而不是属性？使用函数时，我更喜欢绑定。

所以而不是：

this.itemsIndex = 5;

你会：

this.itemsIndex = function() {
    return 5;
}

在您的 HTML 中：

avm.itemsIndex() === $index+1; // notice parantheses

【讨论】：

谢谢。我尝试使 avm.itemsIndex 成为一个函数，但结果相同。奇怪的是，如果我转储每个项目中的变量，值显示正确，但 ng-class 仍然让类错误，所以 {{avm.itemsIndex === $index}} 显示“假”但它仍然有 .active 类来自： active : avm.itemsIndex === $index
尝试 ...active : avm.itemsIndex($index) ... 并让函数返回一个布尔值 - 检查 $index 是函数内部的预期值并且函数返回预期的布尔值
我试过了，同样的问题。我什至尝试不使用 ng-class 而只是输入 {{ avm.itemsIndex === $index? 'active' : '' }} 等直接在 class="" 中，并将其转储到每个项目内容中以显示值。在项目内容中它是正确的，但在课堂上它变得混乱。我想知道这是否是一个阻止更新 class="" 如此迅速的问题？无论如何，我已将滑块绑定到不同的变量，并在 200 毫秒时使用 $inteval 来更新 avm.itemsIndex 值。少于 200 的任何内容都会导致混淆。这是可怕的hacky，但它的工作原理。很奇怪的问题。
@user2248331 您是否尝试过将 ng-class 绑定到函数而不是使用对象语法？例如。在函数中执行逻辑并返回相应的类名？
詹姆斯，是的，我做到了。最终起作用的是在更新标记类时设置了一个轻微的超时（250 毫秒）。这似乎是一个浏览器问题而不是角度问题，并且与更新标签属性太快有关

【解决方案2】：

最终起作用的是在更新标记类时设置了一个轻微的超时（20 毫秒）。这似乎是一个浏览器问题而不是角度问题，并且与更新标签属性太快有关

【讨论】：